当我制作一个可拖动的克隆并将其拖放到可拖放状态时,我不能再拖动它

当我制作一个可拖动的克隆并将其拖放到一个可拖拽的位置时,我不能再拖动它。 我怎么做? 其次,我只能弄清楚如何.append添加克隆到droppable。 但是,在任何现有元素之后,它会捕捉到左上angular,而不是放置位置。

 $(document).ready(function() { $("#container").droppable({ drop: function(event, ui) { $(this).append($(ui.draggable).clone()); } }); $(".product").draggable({ helper: 'clone' }); }); </script> <div id="container"> </div> <div id="products"> <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" /> <img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" /> <img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" /> </div> 

一种方法是:

 $(document).ready(function() { $("#container").droppable({ accept: '.product', drop: function(event, ui) { $(this).append($("ui.draggable").clone()); $("#container .product").addClass("item"); $(".item").removeClass("ui-draggable product"); $(".item").draggable({ containment: 'parent', grid: [150,150] }); } }); $(".product").draggable({ helper: 'clone' }); }); 

但是我不确定这是不是很好,干净的编码。

我通过Google发现了这个问题。 我不能保持位置不要紧贴容器,直到我将“ui.draggable”更改为“ui.helper”时,才附加:

 $(this).append($(ui.helper).clone()); 

对于那些试图重新定位丢弃的项目。 看看这里。

JQuery的拖放和克隆 。

我实际上不得不使用看起来像的代码

 $(item).css('position', 'absolute'); $(item).css('top', ui.position.top - $(this).position().top); $(item).css('left', ui.position.left - $(this).position().left); 

去做吧。

这是我的解决scheme,它允许拖放一个克隆,然后根据需要通过另一次拖放来replace它。 它还有一个callback函数参数,它传回被丢弃的div对象,以便您可以对jquery选定的div进行一些操作。

 refreshDragDrop = function(dragClassName,dropDivId, callback) { $( "." + dragClassName ).draggable({ connectToSortable: "#" + dropDivId, helper: "clone", revert: "invalid" }); $("#" + dropDivId).droppable({ accept: '.' + dragClassName, drop: function (event, ui) { var $this = $(this), maxItemsCount = 1; if ($this.children('div').length == maxItemsCount ){ //too many item,just replace $(this).html($(ui.draggable).clone()); //ui.sender.draggable('cancel'); } else { $(this).append($(ui.draggable).clone()); } if (typeof callback == "function") callback($this.children('div')); } }); }