jQuery draggable не перетаскивается после сброса

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

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

Точно такой же код работал, когда я добавлял li к ul, но я хотел переместить только название элемента, а не количество, поэтому я использую div вместо li.

Вот jsfiddle моего кода: http://jsfiddle.net/imjustabill/eJ4KH/

И вот соответствующие части

      $(function () {
        $("#inventory1 .item").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#inventory2").droppable({
            drop: function (event, ui) {
                var item = ui.draggable.attr("data-item");
                var qty = ui.draggable.attr("data-qty");
                var itemDesc = ui.draggable.text();
                if (!$(this).find("[data-item='"+item+"']").length) {
                    $("<div class='qty'></div>").text(qty).appendTo(this);
                    $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this);
                }
            }
        });

        $("#inventory2 .item").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#inventory1").droppable({
            drop: function (event, ui) {
                var item = ui.draggable.attr("data-item");
                var qty = ui.draggable.attr("data-qty");
                var itemDesc = ui.draggable.text();
                if (!$(this).find("[data-item='"+item+"']").length) {
                    $("<div class='qty'></div>").text(qty).appendTo(this);
                    $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this);
                }
            }
        });
    });

<div id="inventory1">
<h4>Inventory 1</h4>
    <div class="qty">7</div><div class="item" data-qty="7" data-item="item1">Item 1</div>
    <div class="qty">5</div><div class="item" data-qty="5" data-item="item2">Item 2</div>
    <div class="qty">2</div><div class="item" data-qty="2" data-item="item3">Item 3</div>
    <div class="qty">9</div><div class="item" data-qty="9" data-item="item4">Item 4</div></div>

<div id="inventory2">
<h4>Inventory 2</h4>
    <div class="qty">4</div><div class="item" data-qty="4" data-item="item1">Item 1</div>
    <div class="qty">2</div><div class="item" data-qty="2" data-item="item5">Item 5</div></div>

Любые идеи? Спасибо.


javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
person user1118374    schedule 13.12.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что Draggable вызывает его destroy() при падении, поэтому вы теряете способность перетаскивания. Один из грязных способов — снова сделать отброшенный элемент перетаскиваемым:

$("#inventory2").droppable({
  drop: function (event, ui) {
    var item = ui.draggable.attr("data-item");
    var qty = ui.draggable.attr("data-qty");
    var itemDesc = ui.draggable.text();
    if (!$(this).find("[data-item='"+item+"']").length) {
      $("<div class='qty'></div>").text(qty).appendTo(this);
      $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).draggable({appendTo: "body", helper: "clone"}).appendTo(this);
    }
  }
});

Но его уже нельзя будет сбросить.

Вы должны использовать draggable/droppable? Просто используйте собственную Sortable со связанными списками в jQueryUI. Он уже отлично реализован в jQueryUI: jQueryUI Sortable со связанными списками

person bam    schedule 13.12.2013
comment
Это потрясающе. Это работает отлично. Кажется, его снова можно сбросить. Не с моим текущим кодом, потому что я не разрешаю дубликаты, но в долгосрочной перспективе это не то поведение, которое я ищу. Как только я убрал требование уникальности, все заработало отлично. Спасибо! - person user1118374; 14.12.2013
comment
У меня есть вопрос по вашему ответу, если вы будете так любезны. Я попытался сделать отброшенный элемент перетаскиваемым, изменив код нового div, который я создавал, на этот: $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).draggable().appendTo(this);, но это дало очень странные результаты. Почему твой работает? - person user1118374; 14.12.2013
comment
@user1118374 user1118374 Вы забыли передать свои настройки {appendTo:"body",helper:"clone"}. Ваш элемент должен перетаскиваться без его передачи, но jQueryUI испортит позиционирование и Domtree, потому что он использует некоторые стандартные настройки, которые не будут соответствовать вашим Domtree и настройкам стилей. $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).draggable({appendTo:"body",helper:"clone"}).appendTo(this); должно снова работать нормально. - person bam; 14.12.2013