0

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 .

  • i am confused. you drag by holding the left mouse button down. when you let go of the mouse button the element stops being dragged??? – Timmy Von Heiss Oct 30 '16 at 06:57
  • Can you please explain a bit better , doubleclick/singleclick how are they supposed to affect the dragging behaviour? – Vinay Oct 30 '16 at 07:14

1 Answers1

1

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

jyloo
  • 103
  • 6
  • ok . i up voted to this answer . But friend could you please tell how to stop drag on double click . –  Oct 30 '16 at 08:38
  • 1
    perhaps you want to try this: `$( document ).dblclick(function() { $( ".your-selector" ).draggable( "disable" ); $( ".your-selector" ).draggable( "enable" ); });` – jyloo Oct 30 '16 at 09:01
  • hi, could you please check this question http://stackoverflow.com/questions/40342500/jquery-draggable-event-changing-the-css-of-child-element –  Nov 02 '16 at 11:13