Question

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

我有一个工作示例（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（）以设置它的位置。

UPDATE ：我已经使用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

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

要解决重复问题，您可以使用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>

drag div正在创建更多div

2 个答案: