jQuery UI: Draggable

Draggable Elements

by touchmealex

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<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;
}

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(ev, ui ) {
        var element=$(ui.draggable).clone();
    $(this).append(element);
    $(element).draggable({helper: 'clone'});
      }
});