Move a drag and dropped DIV back to it's previous location programatically using jQueryUI Sortable

Question

I am using jQueryUI Sortable to build a KanBan style board. THe boards will be used to hold Order records from a database. Each bBoard/Column is a "Status" that the Order record is currently in. So as an order progresses through the assembly line, it can be drag and dropped to a new board/column which will then make an AJAX request to update the order records status database column.

This image should help explain better...

After you drag and drop an order to a new column/board it shows an alert dialog like this image below. If you accept it, it will then make the AJAX request to save the new column/board for this order record that was just moved.

If you click Cancel then it will not make the AJAX request. THis means the ordr rcord will technically still be saved as being under it;s previous column. HOwever in the DOM it will be dropped in it;s new location.

I need to figure out how I can make the order record move back to it;s previous column when a drag and drop is canceled via the alert dialog.

Any ideas how to programmatically move the order record to it;s previous board/column?

Basic JavaScript code...

$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });

    // Event fired when order cards has been moved to a new column
    $(".column").on("sortreceive", function(event, ui){

      var newStatusColumnName = $(this).data('status-name');

      // Show a confirmation Dialog.
      // Approve = AJAX save new column that order was moved to
      // Cancel = Do not save new value to database and move order
      // back to previous board/column

    });

});

---

Demo JSFidle setup here http://jsfiddle.net/jasondavis/wv6fchmv/

Answer 1

Try

            'Cancel': {
                'class': 'gray',
                'action': function() {

                    // need to move the order card back to its previous status column somehow!
                   $(ui.sender).sortable('cancel');

                }
            }

on the cancel button click

Updated your fiddle http://jsfiddle.net/wv6fchmv/2/

More here jQuery Sortable - cancel and revert not working as expected