当我制作一个可拖动的克隆并将其放入可放置的对象中时，我无法再次拖动它 [英] When I make a draggable clone and drop it in a droppable I cannot drag it again

问题描述

当我制作一个可拖动的克隆并将其放入可放置的对象中时，我无法再次拖动它.我怎么做?其次，我只能弄清楚如何通过 .append 将克隆添加到可放置对象中.但随后它会在任何现有元素而不是放置位置之后捕捉到左上角.

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 .append to add the clone to the droppable. But then it snaps to the top-left corner after any existing element and not the drop position.

$(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'
    });
});

但我不确定它是否是干净整洁的编码.

But I'm not sure if it is nice and clean coding.

这篇关于当我制作一个可拖动的克隆并将其放入可放置的对象中时，我无法再次拖动它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！