jquery-ui - jQuery 用户界面 : How can I cancel the revert of a sortable element on successful drop on a droppable element?

Question

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

或者，也可以将元素拖到 5 个可用的放置区(可放置 容器)上。

我遇到的问题是这样的:当在 droppable 区域上成功完成放置时，sortable 的恢复动画仍在播放，将放置的元素动画返回进入可排序列表。

相反，我想以一种方式对其进行动画处理，即从 drop 发生的位置获取助手，然后将其动画到 droppable区域，有点像将文件拖到 Mac 上的废纸篓中。

要使后者正常工作，我需要:

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

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

关于如何实现这一目标有什么想法吗？

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.

  });