There are some built-in options for this, on your .draggable(), set the revert option to ‘invalid’, and it’ll go back if it wasn’t successfully dropped onto a droppable, like this: $(“#draggable”).draggable({ revert: ‘invalid’ }); Then in your .droppable() set what’s valid for a drop using the accept option, for example: $(“#droppable”).droppable({ accept: ‘#draggable’ }); Anything … Read more
Check out http://jqueryui.com/demos/droppable/#visual-feedback. Ex: $( “#draggable” ).draggable(); $( “#droppable” ).droppable({ hoverClass: “ui-state-active”, drop: function( event, ui ) { $( this ) .addClass( “ui-state-highlight” ) .find( “p” ) .html( “Dropped!” ); } }); $( “#draggable2” ).draggable(); $( “#droppable2” ).droppable({ accept: “#draggable2”, activeClass: “ui-state-hover”, drop: function( event, ui ) { $( this ) .addClass( “ui-state-highlight” ) .find( … Read more
Because the droppable’s drop event fires before the draggable’s stop event, I think you can set a flag on the element being dragged in the drop event like so: jQuery(‘#droppable’).droppable( { accept: ‘#draggable’, drop: function(event, ui) { ui.helper.data(‘dropped’, true); // awesome code that works and handles successful drops… } }); jQuery(‘#draggable’).draggable( { revert: false, start: … Read more
For the cursor position while dragging, see this answer : Make Cursor position in center for ui.helper in jquery-ui draggable method Basically, you can control the cursor position of the instance, allowing to have something more dynamic that cursorAt. Like this: start: function(event, ui){ $(this).draggable(‘instance’).offset.click = { left: Math.floor(ui.helper.width() / 2), top: Math.floor(ui.helper.height() / 2) … Read more
If you just want your current jQuery UI code to work with touch events, you can use the jQuery UI Touch Punch monkey patch. The only “technical problem or core incompatibility” is that jQuery UI (1.x) only listens for mouse events, not touch events (See @ScottGonzales’s response for the historical reason). jQuery touch punch, above, … Read more
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
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.
From the drop event documentation: This event is triggered when an accepted draggable is dropped ‘over’ (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. While ui.draggable represents the draggable. So: $(“#dock”).droppable({ drop: function(event, ui) { // do something with the dock $(this).doSomething(); // do something … Read more