CODEWITHSUNDEEP
jquery-ui
Chris Headleand
Chris Headleand

Reputation: 6193

Clone draggable element jQuery UI

I have a page with a draggable element which I want to drop into a droppable section of the page. However, when I click on the draggable div I actually want to spawn a clone and drag that into the droppable environment instead (leaving the original behind). In essence I'm trying to create a series of prefabs in a left hand tool-box. When I click on them to drag them into the drawing I just want to spawn a clone of that type of div. is this possible in JavaScript?

Upvotes: 2

Views: 4299

Answers (1)

Trevor
Trevor

Reputation: 16116

Yes it is possible.. Here is an example

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;  
    }
});

Example

Fiddle

Upvotes: 3

Related Questions