javascript - jQuery:多个可拖动对象和可放置对象？

我正在尝试使用可拖放的jQuery。

我的页面上有多个可拖动对象和多个可放置对象。

drga和drop可以正常工作，但是问题是，当我将div拖放到1个droppable上时，它也会被克隆到页面上的其他droppables中。此外，当我将dropgables移入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();
  }
});

将红色div拖到黑色div上，您应该会看到问题。

有人可以建议这个问题吗？

任何帮助，将不胜感激。

编辑：

靠近但还不很远：https://jsfiddle.net/qkhunz8k/2/

最佳答案

编辑：显然我沟通不畅。让我再试一次。您所有的可丢弃对象都具有类droppable。正如您所说，他们当然会这样做。这是本课的目的。

但是，在您的代码中，当您说x.appendTo('.droppable')时，这就是重复项的来源。它附加到具有droppable类的每个元素上。

我不建议您更改或删除可放置类。我不建议您更改所有jquery选择器。我只是建议您在执行.appendTo时，也许只应将其附加到目标的droppable上。不是所有的人。那有意义吗？您可以通过执行x.appendTo(this)来实现。只需更改该行，然后查看重复的问题是否消失即可。

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

此更改唯一要做的就是更改可拖动元素附加到的元素数量。它不会引起任何其他变化。但是我认为它将解决您的原始问题。

顺便说一句，我是否建议您换一条线就能得到更好的结果？如果要使用ui.draggable而不是ui.helper，则可能会发现css位置管理起来更容易一些，并且不需要操纵top和left属性，因此许多。只是一个想法。

var x = ui.draggable.clone();

小提琴here的更新修改

关于javascript - jQuery:多个可拖动对象和可放置对象？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36560440/