Question

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

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/

JQUERY在div中拖动和克隆

2 个答案: