Question

我试图使用jquery draggable和droppable。

我的页面上有多个draggable和多个droppables。

drga和drop工作得很好，但问题是当我将div拖放到1个droppable上时，它会被克隆到我页面上的其他droppable中...当我将dropggables移动到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/

Answer 1

编辑：显然我的沟通不是很好。让我再试一次。您的所有droppable都有类droppable。如你所说，他们当然会这样做。这就是班级的目的。

但是，在您的代码中，当您说x.appendTo('.droppable')时，这是您的重复项的来源。它附加到具有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

的修改

jQuery：多个draggables和droppables？

1 个答案: