drag event for jquery-ui-sortable

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'); }
});

Upvotes: 16

Answers (4)

Henry Brewer

Reputation: 169

Events go in this order:

"handle" - click down
"start" - start of dragging - you can add a class here
"activate"
"sort" - change of the item position
"change" – change of the items order
"beforeStop" - release of a mouse button
"deactivate"
"out"

"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>

Upvotes: 2

Gangai Johann

Reputation: 888

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

Upvotes: 3

v42

Reputation: 1425

Use sort event for this purpose:

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

http://jsbin.com/kegeb

Upvotes: 31

kroe

Reputation: 1126

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

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

Upvotes: 1

drag event for jquery-ui-sortable

Answers (4)

Related Questions