Jquery ui drag and drop problem

Question

I am creating one toolbar plugin with jquery and drag and drop functions from jquery ui. The idea is this: I have a list (ul) and elements (li), where each of them is a tool such as text, geometric shape, etc. when I drag the tool and then drop it onto the conveyor, a widget must be created. The problem is that after the tool has fallen onto the container, it is no longer available for drag and drop. The drag and drop function only works once.

I hope you can help. Sorry for my English.

here is the code

plugin

(function($){ //Attach this new method to jQuery $.fn.extend({ //This is where you write your plugin name spkToolbar: function(options) { //Set the default values, use comma to separate the settings, example: var defaults = { isDraggable:false ,droppableDiv:undefined }; var options = $.extend(defaults, options); //Iterate over the current set of matched elements return this.each(function() { var o = options; $(this).addClass('toolbar'); if(o.isDraggable) $('.toolbar').draggable(); $(this).addClass('spkToolbar'); var obj = $(this); //Get all LI in the UL var items = $("ul li", obj); items.draggable({ appendTo: "body",helper: 'clone' }); if(o.droppableDiv!=undefined){ $(o.droppableDiv).droppable({ drop: function( event, ui ) { // some extra code for proper widget creation } }); } }); } }); })(jQuery); 

html

 <div id="toolbar"> <ul> <li id="save" title="Guardar cambios"><img src="<c:url value="images/toolbar/save.png" />" /></li> </ul> </div> 

using:

  jQuery('#toolbar').spkToolbar({droppableDiv:'#new-dropcontainer'}); 

almost forget i am using jquery 1.5 and jquery ui 1.8.1

Thanks in advance

Answer 1

Here's the working version of your code: http://jsfiddle.net/marcosfromero/YRfVd/

I added this HTML code:

 <div id="new-dropcontainer"> <ul> </ul> </div> 

with this related javascript:

  if(o.droppableDiv!=undefined){ $(o.droppableDiv).droppable({ drop: function( event, ui ) { // clone the original draggable, not the ui.helper // and append it to the ul element inside new-dropcontainer jQuery('#new-dropcontainer ul').append(ui.draggable.clone()); // some extra code for proper widget creation } }); } 

Answer 2

You have to clone () the dragged object.

or better yet, use the helper clone option

 $( ".selector" ).draggable({ helper: 'clone' }); 

Answer 3

Why not just partially fade out the click on the icon, clone it and initiate drag and drop onto the cloned item?

Answer 4

Just in case, I changed the jquery version from 1.5 to 1.4.1, and it worked. I do not know why..

Thank you all

Answer 5

I ran into the problem of positioning a drag element. When I try to drag an element and not add an element, it is always positioned at the top. This is the soul that I received for this. Hope this is helpful.

 $(".zone1, .zone2").sortable({ connectWith: ".test", cursor: 'pointer', over: function (event, ui) { ui.placeholder.appendTo(ui.placeholder.parent()); } } }).disableSelection();