jQuery UI Сортируемые связанные элементы

У меня есть два столбца, каждый со многими строками/div. Я пытаюсь заставить JQuery UI Sortable работать таким образом, что если я перетащил div в левый столбец, соответствующая строка/div в правом столбце также будет отсортирована.jQuery UI Сортируемые связанные элементы

Например,

<html><body> 
    <div class='left-column'> 
    <div class='field' id='left_1'>content 1</div> 
    <div class='field' id='left_2'>content 2</div> 
    <div class='field' id='left_3'>content 3</div> 
    </div> 
    <div class='right-column'> 
    <div class='field' id='right_1'>content 1</div> 
    <div class='field' id='right_2'>content 2</div> 
    <div class='field' id='right_3'>content 3</div> 
    </div> 
</body></html>

Что касается JQuery, прямо сейчас у меня есть,

function linkedSort() { 
    $('.left-column').sortable({ 
    axis: 'y', 
    stop: function(event, ui) { 
     $('.left-column .field').each(function(i, field) { 
     var fieldName = $(field).attr('id'); 
     var fieldNumber = fieldName.substr(fieldName.indexOf('_')+1); 
     // do something here to place it in the right area 
     }); 
    } 
    }); 
};

Если я перетащить .left колонки .field_2 ниже .field_3, соответствующие дивы в .right -колонна также должна перестроить себя.

Спасибо!

источник

2012-06-15 Michael Choi

Боюсь, ваш вопрос, в его нынешнем виде, составляет лишь разметку и код шаблонный. Вы вообще что-то пробовали? Пожалуйста, отправьте код из ваших (даже неполных или неправильных) попыток решить эту проблему; это поможет нам настроить решение на ваш конкретный вариант использования. –

Извините, первый раз задавая вопрос о StackOverflow. Кроме того, довольно новый для jQuery и Javascript, поэтому, пожалуйста, извините мою кодировку. Я надеялся, что было встроенное решение от jQuery UI, поэтому я не думал, что то, что я сделал, было важно. –

Я думаю, что это может быть то, что вы ищете:

<div class='left-column'> 
    <div name='field_1'>content 1</div> 
    <div name='field_2'>content 2</div> 
    <div name='field_3'>content 3</div> 
    </div> 
    <div class='right-column'> 
    <div name='field_1'>content 1</div> 
    <div name='field_2'>content 2</div> 
    <div name='field_3'>content 3</div> 
</div> 

$('.left-column').sortable({ 
    axis: 'y', 
    stop: function(event, ui) { 
     $('.left-column div[name^=field_]').each(function(i, v) { 
      $('.right-column').find("[name=" + $(v).attr('name') + "]").appendTo($('.right-column')); 
     }); 
    } 
}); 
$('.right-column').disableSelection();

источник

2012-06-15 19:03:46 hitmanDX

Это работает! Благодаря! –

jQuery UI Сортируемые связанные элементы

ответ

Смежные вопросы