Okay, so I spend an hour trying to figure it out, then as soon as I ask I then find my answer http://jsfiddle.net/rA4CB/7/ Modified the JS to the following: $(function() { $( “#draggable” ).draggable(); $( “#droppable” ).droppable({ tolerance:’pointer’, drop: function( event, ui ) { $( this ) .addClass( “ui-state-highlight” ) .find( “p” ) .html( “Dropped!” … Read more
One way to do it is: $(document).ready(function() { $(“#container”).droppable({ accept: ‘.product’, drop: function(event, ui) { $(this).append($(“ui.draggable”).clone()); $(“#container .product”).addClass(“item”); $(“.item”).removeClass(“ui-draggable product”); $(“.item”).draggable({ containment: ‘parent’, grid: [150,150] }); } }); $(“.product”).draggable({ helper: ‘clone’ }); }); But I’m not sure if it is nice and clean coding.
You could use the draggable’s helper option to drag groups of items. For example, if your draggables have checkboxes, you can return the selected items from the helper function like so: $(‘#dragSource li’).draggable({ helper: function(){ var selected = $(‘#dragSource input:checked’).parents(‘li’); if (selected.length === 0) { selected = $(this); } var container = $(‘<div/>’).attr(‘id’, ‘draggingContainer’); container.append(selected.clone()); … Read more
it is because it simulating drag event only without drop, use drag-n-drop instead. draggable.simulate(“drag-n-drop”, {dx: dx, dy: dy});