Question

I have a sortable list in which are several elements that need to be able to be reordered by the user.

Alternatively the elements can also be dragged onto 5 available dropzones (droppable containers).

The problem I am encountering is this: When the drop is successfully done on a droppable zone, the revert animation of the sortable is still playing animating the dropped element back into the sortable list.

Instead I would like to animate it in a way that the helper is taken from where the drop occurred and then animated into the droppable zone, sort of like dragging a file into the Trash on a Mac.

For the latter to work however I’d need to:

1. On successful drop, stop the revert animation.
2. Copy the coordinates of the dropped element and launch custom animation to the center of the droppable element.

The issue is within part (1), draggable allows the ‘invalid’ or ‘valid’ flags on revert but sortable doesn’t.

Any ideas on how I can achieve this?

Answer 1

So after a bit of back and forth I’ve managed to resolve this by cloning the original ui.helper element (that sortable creates) and using this clone (which isn’t being reverted back obviously) to finish the custom animation sequence while removing the original helper and placeholder (created by sortable) to hide sortable‘s revert animation.

It’s not quite as clean as I would’ve preferred it because I’m effectively still letting the sortable‘s revert function execute (rather than cancelling it) but until someone has a better idea this works.

Code below:

// default sortable interaction/setup.
$('.sortable-list').sortable({
  placeholder: 'sortable-list__item sortable-list__item--placeholder',
  revert:      true,
  helper:      'clone',
  tolerance:   'pointer',
  connectWith: '.sortable-list',
  appendTo:    'body',
  zIndex:      1000
});

// dropzone interaction will grab the ui.helper from sortable clone it and then
// reuse it for it's own finish animation while removing the helpers from the
// sortable list and dom.
$('.dropzone')
  .droppable({
    accept:      '.sortable-list__item',
    hoverClass:  'dropzone--hover',
    activeClass: 'dropzone--active',
    tolerance:   'pointer'
  })
  .on('drop', function(event, ui) {
    var $item   = ui.draggable, // this is the original item.
        $helper = ui.helper;    // this is the cloned item the user drags

    // clone the helper instance and position it in the same exact spot where
    // the user had left it using the ui.position
    // (or ui.offset depending on your nesting/positioning of the helper)
    var $clone  = $helper.clone().css({ 
          "position": "absolute",
          "top":      ui.position.top,
          "left":     ui.position.left
        }).appendTo('body');

        // cleanup the original helper (remove from stage) and hide placeholder
        // elements. We're hiding the latter because the revert callback of 
        // sortable is removing it for us and will otherwise throw an error that
        // the placeholder can't be removed because it no longer exists in the DOM.
        $helper.remove();
        $('.sortable-list__item--placeholder').hide();

    // launch into your own animation sequence using the $clone of $helper
    // and process the drop data accordingly.

  });