JQuery .sortable("cancel") - how to get the item that was moved?

Question

I'm a newbie in jQuery. I've searched the documentation and stackoverflow, and couldn't find an answer. I need to cancel last change in the sortable list when clicking on a button, and it works.

I also need to get the element (or the id of it), which has been moved to its previous position. How can I do it?

The code I have:

<script type="text/javascript">
$(function(){
  $("#sortable").sortable({
    placeholder: "ui-state-highlight",
    opacity: 0.6
  });
  $("#cancelSort").click(function(){
    $("#sortable").sortable("cancel");
  });
});
</script>

<button id="cancelSort">Cancel Sort</button>

Thanks in advance!

score 0 · Accepted Answer · edited May 23 '17 at 11:43

Create a variable, use the stop event, and set the variable to the ui.item.

$(function(){
    var last_el=null,
        last_id=null;

  $("#sortable").sortable({
      placeholder: "ui-state-highlight",
      opacity: 0.6,
      stop: function( event, ui ){
        last_el = $(ui.item);  //element
        last_id = $(ui.item).attr('id'); //element_id
      }
  });

  $("#cancelSort").click(function(){
     $("#sortable").sortable("cancel");
     console.log(last_el, last_id);
  });
});

DEMO: http://jsfiddle.net/dirtyd77/Tmdmq/

NOTE: If you are unfamiliar with console.log, then go to this link.

JQuery .sortable("cancel") - how to get the item that was moved?

1 Answers1