拖动 div 正在创建更多 div

Question

我正在尝试拖动一些 .draggable div 并放入 .droppable div。

我有一个工作示例 (http://jsfiddle.net/amrezfq1/)，但我有两个问题：

第一个问题：当我拖动 .draggable div 并放入 .droppable div 时，.draggable div 不会停留在我放置的位置，它总是在 div 的左侧对齐。 （我认为这是因为 append()，但不知道如何解决这个问题）

第二个问题：我想拖动我放在里面的 div。 droppable div，但是当我这样做时，每次我在 .droppable 中拖动一个 div 时，它都会再创建一个 .draggable div。

你能帮忙把这个工作正常吗？

jQuery:

$(function () {
    $(".draggable").draggable({
        helper: 'clone',
        revert: 'invalid'
    });
    $(".droppable").droppable({
        drop:function(event,ui){
            var element=$(ui.draggable).clone();
            $(this).append(element);
            $(element).draggable();  
        }
    });
});

Answer 1

试试这个。删除元素后，我添加了一个名为 dragged 的类。这避免了在同一元素上进一步调用 drop 事件。还提取了被删除元素的 offset() 来设置它的位置。

更新：我已更改代码以使用 ui.offset.left 和 $(this).offset().left 的差异提取左边距。不幸的是，没有使用相同的逻辑提取顶部边距。所以我添加了我自己的计算来动态确定它。

var itemsCount = 0;
var factor = 1.1;

$(function () {
    $(".draggable").draggable({
        helper: 'clone',
      revert: 'invalid'
    });
    $(".droppable").droppable({
        drop:function(event,ui){
             if(!$(ui.draggable).hasClass("dragged")){
                var element = $(ui.draggable).clone();                
                $(element).css({"left": ui.offset.left - $(this).offset().left});
                if(itemsCount > 0)
                {
                 var adjustedHeight = ($('.ui-draggable').css("height").replace("px","") * itemsCount * factor);   
                 $(element).css({"top" : ui.offset.top - ($(this).offset().top + adjustedHeight)}); 
                }
                $(element).addClass("dragged");
                $(element).draggable(); 
                $(this).append(element);
                itemsCount++;
             }
        }
    });
});

例如：http://jsfiddle.net/amrezfq1/3/

Answer 2

位置关闭的原因是因为您正在克隆可拖动元素，而您实际定位的元素是助手。您可以通过克隆帮助程序而不是实际的可拖动对象来解决此问题。

要解决重复问题，您可以使用 droppable 的 accept 选项来确保接受的可拖动对象不在 droppable 中，如下所示：

$(function() {
  $(".draggable").draggable({
    helper: 'clone',
    revert: 'invalid'
  });
  $(".droppable").droppable({
    accept: ':not(.droppable > .draggable)',
    drop: function(event, ui) {
      var element = ui.helper.clone();
      $(this).append(element);
      $(element).draggable({
        containment: this
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="draggable">draggabel</div>
<div class="droppable">droppable</div>