Question

在一个面板中，我有被调用的资源，就像黄色正方形

我想将元素拖到另一个面板，然后复制一个，但原始的仍然存在，

标记很简单：

   <div id="panel">
        <div id="square" class="square"></div>  //the resource
    </div>
    <div id="canvas">
    </div>

drag js code：

$('#panel .square').draggable({
    appendTo: "#canvas",
    helper: "clone"
});

$('#canvas').droppable({
    drop: function (e, ui) {
        var $temp_id = $(ui.draggable).attr('id');
        var $new_id = $temp_id + "_01";
        $(ui.draggable).clone()
                        .css({ 'top': ui.offset.top, 'left': ui.offset.left })
                        .appendTo($(this))
                        .attr('id', $new_id);

        $('#'+$new_id+'').draggable();
    }
});

我只希望资源元素可以复制自己，但是画布中的副本也可以自己复制！继承复制能力！

谢谢

这里是example

我做了什么？为什么会发生这种情况？我该怎样取消这个？

Answer 1

只需将此添加到您的放置事件中。

ui.draggable.remove();

那将删除原始元素。

另外，为了防止重复您的项目，请考虑将其添加到您的可拖动项目中。

accept: function(d) {
        return $(this).find(d).length == 0
}

它做的是什么;它会检查容器中是否存在对象d，如果该对象存在，则代码将return false，从而防止导致重复的对象掉落。

希望这有帮助。

jquery ui drag and;掉落效果

1 个答案: