CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggable
RainingChain
RainingChain

Reputation: 7782

Jquery: Draggable sensibility

I have a draggable DOM element using jquery.

If the client clicks it without moving, the draggable start isn't called and it acts like it wasn't a draggable.

When the clients clicks it and move the mouse 1 pixel away while holding down, the drag starts. The event is triggered, classes are applied etc...

Is there a way to trigger the drag start only if the client clicked the element and moved the mouse at least 10px away instead?

Note: This isn't related with scrolling.

Code example from live demo at https://jqueryui.com/draggable/: 

<style>#draggable { width: 150px; height: 150px; padding: 0.5em; }</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<script>
$(function(){
    $("#draggable").draggable(); 
    //goal is to only starts dragging if mouse moved more than 10px
});
</script>

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

Upvotes: 3

Views: 1652

Answers (1)

Jules
Jules

Reputation: 2019

It looks like you want to use the 'distance' property. http://api.jqueryui.com/draggable/#option-distance

"Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element."

$( "#draggable" ).draggable({
  distance: 10
});

Upvotes: 7

Related Questions