I am using the jQuery UI Sortable plugin to of course allow my users to drag and drop elements in a list, on the list change I am firing an ajax call to save the ordered list.
However one user is complaining that it is quite hard to drag and drop when the list requires a scroll. So basically what I am attempting to do is instead of the hold left click to drag and then release left click to drop.
You will just left click on the element and it will become the active "drag" element and the user can move their mouse around the screen and it will follow, then on the second left click deactivate "drop" the element.
I have looked at their documentation, but I can't seem to find anything that will help me out (http://api.jqueryui.com/sortable/). Does anyone have any ideas or plugins that achieve this?
Regards
This should help you with this: 'You will just left click on the element and it will become the active "drag" element and the user can move their mouse around the screen and it will follow, then on the second left click deactivate "drop" the element.'
HTML:
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
Javascript:
$( function() {
var dragging = false;
$("#draggable").draggable();
$("#draggable").mouseup(function(e){
if(!dragging){
dragging = true;
e.preventDefault();
return false;
}
else{
dragging = false;
}
})
} );
Codepen example: http://codepen.io/xszaboj/pen/JWbzax
I hope that is what you need.
Side note. This won't work on touch screen monitors on chrome because of different events which are fired.