jQuery UI：如何在可放置元素上成功放置时取消可排序元素的还原？

Question

我有一个sortable 列表，其中有几个元素需要用户重新排序。

或者，也可以将元素拖到 5 个可用的放置区（droppable 容器）。

我遇到的问题是：当在droppable 区域上成功完成放置时，sortable 的还原动画仍在播放动画，将放置的元素放回 sortable 列表中。

相反，我想以一种方式对其进行动画处理，即从出现 drop 的位置获取助手，然后将动画进入 droppable 区域，有点像将文件拖到Mac 上的垃圾箱。

为了让后者工作，但我需要：

1. 成功放置后，停止还原动画。
2. 复制拖放元素的坐标并将自定义动画启动到可拖放元素的中心。

问题在第 (1) 部分中，draggable 允许在 revert 上使用“无效”或“有效”标志，但 sortable 不允许。

关于如何实现这一点的任何想法？

Answer 1

所以经过一番反复后，我设法通过克隆原始 ui.helper 元素（由 sortable 创建）并使用这个克隆（显然没有被还原）来完成自定义动画序列，同时移除原始助手和占位符（由sortable 创建）以隐藏sortable 的还原动画。

它并不像我希望的那样干净，因为我实际上仍然让sortable 的恢复功能执行（而不是取消它），但直到有人有更好的想法它才有效。

代码如下：

// 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.

  });