Question

我有一个带有可拖动元素的页面，我想将其放入页面的可放置部分。但是，当我点击可拖动的div时，我实际上想要生成一个克隆并将其拖动到可放置的环境中（将原始文件放在后面）。本质上，我试图在左手工具箱中创建一系列预制件。当我点击它们将它们拖动到图形中时，我只想生成该类型div的克隆。这在JavaScript中可能吗？

Answer 1

是的，有可能..这是一个例子

<强> HTML

<div class="draggable" style="position:absolute;">
    <p>Draggable</p>
</div>
<br />
<br />
<div id="droppable">
    <p>Drop here</p>
</div>

<强> CSS

.draggable {
    width:65px;
    border: 1px solid blue;
}

#droppable {
   border:1px solid green; 
    width:300px;
    height:100px;
}

<强> jQuery的/使用Javascript

var dropped = false;

$( ".draggable" ).draggable();

$( "body" ).on( ".draggable dragstart", 
    function( event, ui ) {
        dropped = false;
        console.log('1');
        ui.helper.before(ui.helper.clone().draggable());                                         
    } 
);

$( "body" ).on( ".drggable dragstop", 
    function( event, ui ) {
        if(dropped)
            ui.helper.draggable('destroy');
        else
            ui.helper.remove(); 
    } 
);

$('#droppable').droppable({
    accept: '.draggable',
    drop: function(event, ui ) {
        dropped = true;  
    }
});

实施例

Fiddle

克隆可拖动元素jQuery UI

1 个答案: