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。

- Sanya

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的一堆红色正方形，这样做不好，还删除了初始正方形的绝对定位，因为它影响了克隆体...。请参考工作的JSFiddle演示。

- DarkAjax

Answer 2

这里有一个可行的解决方案，不确定它是否是最佳方案。我将当前盒子附加到新容器中，并在原始位置添加一个克隆体，重新绑定监听器。

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

Working jsfiddle: http://jsfiddle.net/WEtr4/3/

- pierdevara

---

谢谢！我不认为这个小工具更新了你的新代码。你能更新一下吗？ - Sanya

抱歉，我发布了错误的代码片段。方框的定位有误是因为它克隆了您绝对定位的位置，但如果您检查源代码，就会发现它实际上是“thespace”的子元素。 - pierdevara