jQuery 当我制作一个可拖动克隆并将其放入可放置对象时，我无法再次拖动它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/867469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When I make a draggable clone and drop it in a droppable I cannot drag it again
提问by Cudos
When I make a draggable clone and drop it in a droppable I cannot drag it again. How do I do that? Secondly I can only figure out how to us .appendto add the clone to the droppable. But then it snaps to the top-left corner after any existing element and not the drop position.
当我制作一个可拖动的克隆并将其放入可放置的对象中时，我无法再次拖动它。我怎么做？其次，我只能弄清楚如何.append将克隆添加到 droppable。但随后它会捕捉到任何现有元素之后的左上角，而不是放置位置。
$(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>
采纳答案by Cudos
One way to do it is:
一种方法是：
$(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'
});
});
But I'm not sure if it is nice and clean coding.
但我不确定它是否是好的和干净的编码。
回答by Bob Nadler
I found this question via Google. I couldn't keep the positions from snapping to the container either, until I changed 'ui.draggable' to 'ui.helper' when appending:
我通过谷歌找到了这个问题。我也无法阻止位置捕捉到容器，直到我在附加时将 'ui.draggable' 更改为 'ui.helper'：
$(this).append($(ui.helper).clone());
回答by rado
For those trying to reposition the dropped item. Take a look here.
对于那些试图重新定位掉落物品的人。看看这里。
I actually had to use code that looks like
我实际上不得不使用看起来像
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
to do it.
去做吧。
回答by Damon Hogan
Here is my solution, it allows for dragging and dropping a clone, and then replacing it after as needed by another drag and drop. It also has a callback function parameter which passes back the dropped div object so that you can do something with the jquery selected div once dropped.
这是我的解决方案，它允许拖放克隆，然后根据需要通过另一个拖放替换它。它还有一个回调函数参数，它会传回已删除的 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'));
}
});
}
