jQuery:多个可拖动项和可丢弃项

jQuery: Multiple draggables and droppables?

本文关键字：拖动 jQuery      更新时间：2024-04-27

我正在尝试使用jquery draggable和dropable。

我的页面上有多个可拖动项和多个可丢弃项。

drga和drop工作得很好，但问题是，当我将div拖放到1个dropable上时，它也会被克隆到我页面上的其他dropable中。。。此外，当我移动滴管内的可拖动部分时，它们会再次相乘。

为了解释这个问题，我创建了这个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);

这个改变唯一能做的就是改变你的draggable被附加到的元素的数量。它不会引起任何其他的改变。但我认为它会解决你最初的问题。

顺便说一句，我可以建议你换一条线会得到更好的结果吗？如果使用ui.draggable而不是ui.helper，您可能会发现css定位会更容易管理，并且不需要对top和left属性进行太多操作。只是一个想法。

var x = ui.draggable.clone();

您的小提琴在这里的更新修改

相关文章：