drag event for jquery-ui-sortable

Question

How to listen to drag event when a jquery-ui-sortable is being dragged?

By hit-n-trial strategy, I've tried drag event from jquery-ui-draggable but it's not working.

$('.widget_container').sortable({
    drag: function(event, ui) { console.log('drag'); }
});

Maverick

Answer 1

Use sort event for this purpose:

$(".sortable").sortable({
    sort: function(e) {
      console.log('X:' + e.screenX, 'Y:' + e.screenY);
    }
});

http://jsbin.com/kegeb

Guthrey

So obvious now that I've seen it...haha. Perfect! – Apply

Answer 2

If you need to handle the event when the user starts to drag, you should use handle instead of sort :

$(".sortable").sortable({
    handle: function(e) {
      console.log('Handled');
    }
});

This event will occurs at the beginning of the drag, and when the page is loaded (http://api.jqueryui.com/sortable/#option-handle).

I suggest you to also check this answer, which explains the correct ways to handle your elements when your list is updated : Get order of list items in a jQuery Sortable list after resort

Good luck

Euroclydon

I tried the 'handle' method and found that it could not distinguish between clicking and dragging and, strangely, disabled the click to sort feature. – Retinoscopy

"Handle" is called after a click down, not after the start of dragging. Not very useful. – Bratcher

Answer 3

Events go in this order:

1. "handle" - click down
2. "start" - start of dragging - you can add a class here
3. "activate"
4. "sort" - change of the item position
5. "change" – change of the items order
6. "beforeStop" - release of a mouse button
7. "deactivate"
8. "out"
9. "stop" - you can remove a class here

   $(function() {
     $("#sortable").sortable();
     $("#sortable").disableSelection();
     $("#sortable").sortable({
       axis: "y"
     });
   
     $("#sortable").sortable({
       handle: function(event, ui) {
         console.log("handle")
       }
     });
   
     $("#sortable").sortable({
       activate: function(event, ui) {
         console.log("activate")
       }
     });
   
     $("#sortable").sortable({
       beforeStop: function(event, ui) {
         console.log("beforeStop")
       }
     });
   
     $("#sortable").sortable({
       change: function(event, ui) {
         console.log("change")
       }
     });
   
     $("#sortable").sortable({
       create: function(event, ui) {
         console.log("create")
       }
     });
   
     $("#sortable").sortable({
       deactivate: function(event, ui) {
         console.log("deactivate")
       }
     });
   
     $("#sortable").sortable({
       out: function(event, ui) {
         console.log("out")
       }
     });
   
     $("#sortable").sortable({
       over: function(event, ui) {
         console.log("over")
       }
     });
   
     $("#sortable").sortable({
       receive: function(event, ui) {
         console.log("receive")
       }
     });
   
     $("#sortable").sortable({
       remove: function(event, ui) {
         console.log("remove")
       }
     });
   
     $("#sortable").sortable({
       sort: function(event, ui) {
         console.log("sort")
       }
     });
   
     $("#sortable").sortable({
       start: function(event, ui) {
         console.log("start");
         ui.item.addClass("dragged");
       }
     });
   
     $("#sortable").sortable({
       stop: function(event, ui) {
         console.log("stop")
         ui.item.removeClass("dragged");
       }
     });
   
     $("#sortable").sortable({
       update: function(event, ui) {
         console.log("update")
       }
     });
   });
   
   
   $("#sortable").on("click", "li", function() {
     console.log("click");
   });

   #sortable {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   
   #sortable li {
     margin-bottom: 0.25em;
     padding: 0.5em;
     border: 1px solid black;
   }
   
   #sortable .dragged {
     border-color: red;
   }

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <ul id="sortable">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
   </ul>

Bratcher

Answer 4

On the documentation it says you shall use "sort" instead of "drag".

http://api.jqueryui.com/sortable/#option-forcePlaceholderSize

Cumin