Как определить, что предмет был добавлен в тот же сортируемый список - PullRequest
Новая
       0

Как определить, что предмет был добавлен в тот же сортируемый список

4 голосов
/ 21 июня 2011

У меня есть два связанных сортируемых списка. Мой код работает хорошо, когда я перетаскиваю один элемент из списка слева на тот, что справа, но вы можете сказать мне, какое событие мне нужно искать, если я хочу узнать порядок элементов в левом списке когда элемент перетаскивается и опускается в тот же список (в основном переупорядочивает элементы в том же списке, не перетаскивая в другой список, а в тот же).

Спасибо.

Edit:

Вот ссылка на код: http://jsfiddle.net/Hitman666/WEa3g/1/

Итак, как вы увидите, у меня есть предупреждение, когда элементы перетаскиваются в опозитные списки, но мне нужно событие также для случая, когда список (например, зеленый) переупорядочивается. Тогда мне нужно будет предупредить заказ, например: 4,3,2,1

HTML: 

<ul id="sortable1" class="connectedSortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li>Item 5</li>    
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>    
</ul>

CSS: 

#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

#sortable1 li{background: green;}
#sortable2 li{background: yellow;}

Javascript: 

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        receive: myFunc
    }).disableSelection();

    function myFunc(event, ui) {
        alert(ui.item.html());
    }
});

Ответы [ 2 ]

2 голосов
/ 21 июня 2011

Вам необходимо использовать событие обновления. Вот мой пример (обратите внимание, что я сделал 2 дополнительных вызова функций для сортировки, поскольку вам нужен evt только в левом списке): 

$(function(){
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable",
        update: myFunc
    });

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",  // deactivate:myFunc
    });

    function myFunc(event, ui){
        var b = $("#sortable1 li"); // array of sorted elems
        for (var i = 0, a = ""; i < b.length; i++)
        {
            var j=i+1; // an increasing num.
            a = a + j + ") " + $(b[i]).html() + '\n ' //putting together the items in order
        }
        alert(a)                 
    }
});

Надеюсь, это поможет.

1 голос
/ 21 июня 2011

используйте это перетаскивание JS, чтобы сделать это и

http://www.redips.net/javascript/drag-and-drop-table-content/

и в нем есть много событий, для которых вы можете написать свой js-код или вызвать код на стороне сервера, используя ajax ..

т.е. 

REDIPS.drag.myhandler_clicked = function () { }
REDIPS.drag.myhandler_moved = function () { document.getElementById('message').innerHTML = 'Element is moved' }
REDIPS.drag.myhandler_notmoved = function () { document.getElementById('message').innerHTML = 'Element is not moved' }
REDIPS.drag.myhandler_dropped = function () { document.getElementById('message').innerHTML = 'Element is dropped' }
...