当我制作一个可拖动的克隆并将其拖放到可拖放状态时，我不能再拖动它
当我制作一个可拖动的克隆并将其拖放到一个可拖拽的位置时，我不能再拖动它。 我怎么做？ 其次，我只能弄清楚如何.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')); } }); }
