JQuery UI connectToSortable как получить доступ к удаленному элементу attr - PullRequest
Новая
       0

JQuery UI connectToSortable как получить доступ к удаленному элементу attr

3 голосов
/ 12 сентября 2011

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

Странно, но эти вещи доступны из функции получателя, но, похоже, они не сохраняются в элементах, поэтому такие функции, как функция обновления сортируемого списка, никогда не видят правильно новый отброшенный элемент, так как новый элемент li этого не делает. действительно есть идентификатор.

Что я делаю не так ?!

Javascript: 

$(document).ready(function () {
    $("#dest").sortable( {
      update : function () { 
          onUpdate();
        },
      receive: function(event, ui) {
          alert("dropped item ID: "+ui.item.attr('id'));
        }
    });

    jQuery('#src > li').draggable({helper:'clone',connectToSortable:'#dest'});
});

function onUpdate() {
    var order = $('#dest').sortable('toArray');
    var txt = "Order: "+order;

    $("#info").text(txt);


}

HTML: 

Source List (dragable):
<div>
    <ul id="src">
        <li id="src_0">src 0</li>
        <li id="src_1">src 1</li>
        <li id="src_2">src 2</li>
    </ul>
</div>

Target List (sortable):  
<div>
    <ul id="dest">
        <li id="dest_0">dest 0</li>
        <li id="dest_1">dest 1</li>
        <li id="dest_2">dest 2</li>
    </ul>
</div>

<span id="info">
    Waiting update...
</span>

Демо на http://jsfiddle.net/h3WJH/1/

Ответы [ 2 ]

4 голосов
/ 25 октября 2011

Я считаю, что jQuery делает это нарочно, потому что идентификатор предназначен для идентификации одного элемента на странице.Попробуйте использовать $. Data () для хранения информации.

Проверьте это: http://jsfiddle.net/wngchng87/h3WJH/11/

1 голос
/ 05 ноября 2012

У меня была та же проблема, и я не нашел хорошего способа сделать это, но нашел обходной путь.

Исходный элемент может быть доступен по событию «receive», но не при обновлении. Я сделал следующее: 

    var droppedId;
    myList.sortable({ 
        receive: function(e, ui) {
            droppedId = ui.item.data('id');

        },
        update: function(e, ui) {
            ui.item.data('id', droppedId);
        },
    })

Идентификатор элемента не может быть доступен через ui.item, но он доступен по адресу ui.sender.attr ('id'), поэтому, если вы используете идентификатор элемента вместо данных, вы можете сделать: 

    var droppedId;
    myList.sortable({ 
        receive: function(e, ui) {
            droppedId = ui.sender.attr('id');

        },
        update: function(e, ui) {
            ui.item.attr('id', droppedId);
        },
    })

Хотя повторять идентификаторы не очень хорошая идея.

...