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 извиква при пускане унищожи() така че губите способността си за плъзгане. Един мръсен начин е да направите своя изпуснат елемент отново да може да се плъзга:

$("#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);
    }
  }
});

Но няма да може да се пусне отново.

Трябва ли да използвате възможност за плъзгане/пускане? Просто използвайте собствения Сортируем със свързани списъци на jQueryUI. Вече е перфектно внедрен в jQueryUI: jQueryUI Сортируем със свързани списъци

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 Забравихте да подадете своите настройки {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