Touch-based devices like iPhone lacks all common mouse related events we are used to in desktop browsers. It does include: mousemove, mousedown, mouseup, among others. So, the short answer is, you will need to use a solution that have in mind “touch events” counterparts for those “mouse events” above: touchstart, touchmove, touchend or touchcancel. Take … Read more
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
I think what you’re looking for is tolerance. I would probably suggest using “pointer” as this will use the mouse cursor as your “overlap” point. http://jqueryui.com/demos/droppable/ $(‘[id^=”cell-“]’).each(function(index) { $(this).droppable({ accept: “.cartridge”, hoverClass: “cell-highlght”, tolerance: “pointer”, drop: function( event, ui ) { $( this ).addClass( “cell-dropped” ); } }); });
Normally when you have any kind of mouse event, you’ll want to have it only operate on one type of mouse click. Therefore, the events passed to your callbacks have a property which allow you to distinguish between types of clicks. This data is passed back through the button property of the event data. See … 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
You need to use cancel. See working example here. Js: $(function() { $(‘.sortable’).sortable(); $(‘.sortable’).disableSelection(); $(‘.sortable’).sortable({ cancel: ‘.note’ }); }); As @Zephyr points out, this let’s you re-arrange the position by dragging the siblings, if you want to avoid that, use owise1 approach: $(‘.sortable’).sortable({ items : ‘:not(.note)’ });
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