javascript - 拖动 div 正在创建更多 div

Question

我试图拖动一些 .draggable div 并放入 .droppable div 中。

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

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

第二个问题:我想拖放里面的div。 droppable div，但是当我这样做时，每次我将一个 div 拖到 .droppable 中时，它都会再创建一个 .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/