Felix Felix - 1 month ago 16
jQuery Question

how to stop drag event on double click in jquery

currently i am using jquery draggable function https://jqueryui.com/draggable/ .

$( ".myclass").draggable({ });


But i want to stop the drag event when the user double click on the dragging element . How to do this ?. Is it [possible to stop dragging in single click ? For some reason my dragging element is come with mouse pointer and i cannot stop dragging .

Thank you .

Answer

Draggable should stop automatically when you release your mouse.

HTML

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

JS

$( function() {
    $( "#draggable" ).draggable({
      scroll: false,
      drag: function( event, ui ) {
        $('#position').html(
          'Left : ' + ui.position.left + '<br/>' +
          'Top : ' + ui.position.top
        );
      },
      start: function( event, ui ) {
        $('#event').html("Dragging");
      },
      stop: function( event, ui ) {
        $('#event').html("Stopped");
      }
    });
  } );

Try the sample above. The dragstop event is automatically called every time you release your mouse from dragging. Try apply this in your code to further investigate why the dragstop is not being called in your case.

http://codepen.io/jyloo/pen/mrZmjO

Comments