JQUERY 跨 div 拖放和克隆

Question

我有一个盒子，当用户单击（按住）时，必须创建一个盒子的克隆，并且该克隆需要是可拖动的。然后用户将克隆的红色盒子带到黑色盒子中以将其放入。我正在使用 JQuery 1.9.1 和 JQuery UI，但我似乎仍然无法做到这一点。有人可以帮忙吗？

这是jsFiddle

HTML

<div id='main'>
    <div id='left'>
      <div id='box'></div>
    </div>
    <div id='right'>
        <div id='thespace'>Place in here</div>
    </div>
</div>

JQUERY

$(document).ready(function() {
    $('#box').draggable({helper: "clone"});
    $('#box').bind('dragstop', function(event, ui) {
        $(this).after($(ui.helper).clone().draggable().css('z-index','99999'));
    });
});

这是jsFiddle

Answer 1

JavaScript：

$('.box').draggable({
    helper: "clone"
}).on('dragstart', function (e, ui) {
    $(ui.helper).css('z-index','999999');
}).on('dragstop', function (e, ui) {
    $(this).after($(ui.helper).clone().draggable());
});

CSS：

.box{width:100px;height:100px;background-color:red;left:50px;top:50px;}

我将 ID 更改为 Class，因为克隆元素会导致一堆具有相同 ID 的红色方块，这根本不好，并且还删除了初始方块的绝对定位，因为它影响了克隆...

Working JSFiddle Demo

Answer 2

这是一个可行的解决方案，不确定它是否是最好的。我将当前框附加到新容器中，并将克隆添加到原始位置，重新绑定侦听器。

var dragConfig = {
        start: function(){
            initialBox = $(this).clone();
            initialBox.draggable( dragConfig );
        },
        stop: function(){
            $(this).appendTo("#"+currentHoverID);
            initialBox.appendTo("#left");
        }
    };

工作 jsfiddle：http://jsfiddle.net/WEtr4/3/