Question

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

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

我遇到的问题是：在droppable区域成功完成放置后，sortable的恢复动画仍在播放已删除元素的动画回sortable } list。

相反，我希望以一种方式设置动画，以便从drop发生的位置获取帮助，然后将设置为 droppable区域，有点像拖动将文件放入Mac上的“废纸篓”。

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

成功放下后，停止恢复动画。
复制已删除元素的坐标并启动自定义动画到droppable元素的中心。

问题在第（1）部分内，draggable允许revert上的“无效”或“有效”标记，但sortable不允许。

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

Answer 1

所以经过一些来回之后，我设法通过克隆原始的ui.helper元素（sortable创建的）并使用此克隆（显然没有被恢复）来解决这个问题）删除原始助手和占位符（由sortable创建）以隐藏sortable的还原动画，以完成自定义动画序列。

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

以下代码：

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

  });

jQuery UI：如何在成功删除droppable元素时取消可排序元素的恢复？

1 个答案: