JQUERY 跨 div 拖放和克隆

Posted 2023-02-22

【中文标题】JQUERY 跨 div 拖放和克隆

【英文标题】：JQUERY Drag and Clone across divs

【发布时间】：2013-06-15 07:44:56

【问题描述】：

我有一个盒子，当用户单击（按住）时，必须创建一个盒子的克隆，并且该克隆需要是可拖动的。然后用户将克隆的红色盒子带到黑色盒子中以将其放入。我正在使用 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

【参考方案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：

.boxwidth:100px;height:100px;background-color:red;left:50px;top:50px;

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

Working JSFiddle Demo

【参考方案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/

【讨论】：

谢谢！我认为小提琴没有更新以显示您的新代码。你能更新小提琴吗？

抱歉发错了小提琴。盒子的定位是关闭的，因为它克隆了您的 abs 定位，但是如果您检查源代码，您会发现它实际上是“thespace”的子代