сортировка jquery: отсортированный элемент вызывает переупорядочение - PullRequest
Новая
       0

сортировка jquery: отсортированный элемент вызывает переупорядочение

1 голос
/ 26 марта 2011

У меня есть список элементов, которые представляют div слои. Когда я сортирую один из этих элементов списка, я хочу, чтобы их соответствующие слои div также были отсортированы.

список: эти позиции сортируются 

<ul id="sortable">
   <li id="1">Div 1</li>
   <li id="2">Div 2</li>
   <li id="3">Div 3</li>
</ul>


слои div: эти элементы будут переупорядочены 

<div id="div_container">
  <div id="div1">Div 1 item</div>
  <div id="div2">Div 2 item</div>
  <div id="div3">Div 3 item</div>
</div>


пример: когда li#1 переходит на второе место, то div#1 автоматически переходит на вторую позицию


init 

$('#sortable').sortable();

Ответы [ 2 ]

3 голосов
/ 27 марта 2011

Этот код может быть тем, что вы хотите, если я получил то, что вы просите:

http://jsfiddle.net/NsawH/84/

var indexBefore = -1;

function getIndex(itm, list) {
    var i;
    for (i = 0; i < list.length; i++) {
        if (itm[0] === list[i]) break;
    }
    return i >= list.length ? -1 : i;
}

$('#sortable').sortable({
    start: function(event, ui) {
        indexBefore = getIndex(ui.item, $('#sortable li'));
    },
   stop: function(event, ui) {
       var indexAfter = getIndex(ui.item,$("#sortable li")); 
       if (indexBefore==indexAfter) return;
       if (indexBefore<indexAfter) {
           $($("#div_container div")[indexBefore]).insertAfter(
               $($("#div_container div")[indexAfter]));
       }
       else {
           $($("#div_container div")[indexBefore]).insertBefore(
               $($("#div_container div")[indexAfter]));
       }
   }
});

Этот код является переносимым, поскольку он не использует идентификаторы элементов, однако вам следует параметризовать сортируемый селектор, чтобы иметь возможность использовать их в любых двух списках, например. если вы привязываетесь к сортируемому после init.

Код удобен для модификации jQuery dom, поскольку использует индексы селекторов, а не индексы dom узлов. На JSFiddle вы увидите, что я сделал div_container сортируемым, и он синхронизируется со списком.

1 голос
/ 26 марта 2011

Свяжите событие change для сортируемого (если вы хотите обновления в реальном времени) или stop (только для чтения конечного состояния) и вручную измените порядок делений соответственно.

...