JQUERY Drag and drop and clone through divs

Question

I have a field that when the user presses (holds), a clone of this field must be created and that the clone needs to be dragged. The user then transfers the cloned red box to the black box to add it. I am using jQuery 1.9.1 and jQuery UI and I still can not figure out what is right. Can anyone help?

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

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

I changed the identifier to a class because cloning an element would result in it having a bunch of red squares with the same identifier, which is not good at all, and also removed the absolute positioning of the initial square, as that affected the clones ...

Working JSFiddle Demo

Answer 2

Here's a working solution, not sure if it is better. I add the current field to the new container and add the clone to its original position, rewriting the listener.

 var dragConfig = { start: function(){ initialBox = $(this).clone(); initialBox.draggable( dragConfig ); }, stop: function(){ $(this).appendTo("#"+currentHoverID); initialBox.appendTo("#left"); } }; 

Jsfiddle work: http://jsfiddle.net/WEtr4/3/