jQuery: Множество перетаскиваемых и перетаскиваемых объектов?

Question

Я пытаюсь использовать jquery draggable и droppable.

У меня есть несколько draggables и несколько droppables на моей странице.

Drga and drop работает нормально, но проблема в том, что когда я перетаскиваю div на 1 droppable, он также будет клонирован в других droppables на моей странице ... также, когда я перемещаю draggables внутри droppables, они снова умножаются.

Чтобы объяснить эту проблему, я создал этот FIDDLE

и это весь мой код:

(function ($) { 
    $.fn.liveDraggable = function (opts) { 
     this.live("mouseover", function() { 
     if (!$(this).data("init")) { 
      $(this).data("init", true).draggable(opts); 
     } 
     }); 
     return this; 
    }; 
}(jQuery)); 
$('.drag').liveDraggable({ 
    helper: 'clone', 
     cursor: 'move' 


     }); 


var x = null; 
$(".droppable").droppable({ 
    drop: function(e, ui) { 
    var parent = $(".droppable"); 
    var x = ui.helper.clone(); 
    var img = $(x) 

    var leftAdj = (ui.position.left - parent.offset().left); 
    var topAdj = (ui.position.top - parent.offset().top); 


    if (x.hasClass("outside")) { 
     x.css({ 
     left: leftAdj, 
     top: topAdj 
     }); 
     x.removeClass("outside"); 

    } 

    x.draggable({ 
     helper: 'original' 
    }); 
    x.find('.ui-resizable-handle').remove(); 
    x.resizable(); 
    x.appendTo('.droppable'); 
    ui.helper.remove(); 
    } 
}); 

Перетащите красную диву на черных дивы, и вы должны увидеть эту проблему.

Не могли бы вы прокомментировать эту проблему?

Любая помощь будет оценена по достоинству.

EDIT:

Приблизиться, но до сих пор не совсем там: https://jsfiddle.net/qkhunz8k/2/

Answer 1

Edit: Видимо, я не очень хорошо общаться. Позвольте мне попробовать это снова. Все ваши droppables имеют класс droppable. Как вы говорите, конечно. Это цель класса.

Однако в вашем коде, когда вы говорите x.appendTo('.droppable'), это источник ваших дубликатов. Он добавляется к каждому элементу, который имеет класс droppable.

Я не предлагаю изменить или удалить класс droppable. Я не предлагаю вам изменить все ваши селекторы jquery. Я только предполагаю, что когда вы делаете свой .appendTo, возможно, вы должны добавить его только к droppable, который является целью. Не все из них. Имеет ли это смысл? Вы можете сделать это, выполнив x.appendTo(this). Просто измените эту строку и посмотрите, не исчезла ли повторяющаяся проблема.

$(".droppable").droppable({ 
... 
     x.appendTo(this); 

Единственное, что изменит это изменение - это изменить количество элементов, к которым добавляется ваш draggable. Это не вызвало бы никаких других изменений. Но я думаю, что это решит вашу оригинальную проблему.

Как в стороне, могу ли я предложить вам улучшить результаты, изменив одну другую линию? Если бы вы использовали ui.draggable вместо ui.helper, вы могли бы обнаружить, что позиционирование css было бы немного проще в управлении, и вам не нужно было бы так много манипулировать объектамии left. Просто мысль.

var x = ui.draggable.clone(); 

обновлена ​​модификация вашей скрипки here