3

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

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

我遇到的问题是：当在一个droppable区域上成功完成拖放时，的恢复动画sortable仍在播放动画，将拖放的元素重新放入sortable列表中。

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

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

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

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

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

4

1 回答 1

1

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

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

下面的代码：

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

  });
于 2012-12-20T21:00:20.297 回答