jQuery UI:如何在成功放下可放置元素时取消可排序元素的还原? [英] jQuery UI: How can I cancel the revert of a sortable element on successful drop on a droppable element?

问题描述

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

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

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

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

我遇到的问题是:在droppable区域上成功完成放置后，sortable的还原动画仍在播放，将放置的元素重新设置为sortable列表的动画.

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.

相反，我想对它进行动画处理，方法是从出现drop的位置获取帮助器，然后将动画化为 到droppable区域，有点像将文件拖到在Mac上为垃圾桶.

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. 成功放下后，停止还原动画.
2. 复制放置元素的坐标，并将自定义动画启动到可放置元素的中心.

问题出在第(1)部分之内，draggable允许revert上的'invalid'或'valid'标志，但sortable不允许.

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?

推荐答案

因此，经过反复来回，我已经设法通过克隆原始的ui.helper元素(由sortable创建)并使用此元素来解决此问题.克隆(不会明显还原)以完成自定义动画序列，同时删除原始助手和占位符(由sortable创建)以隐藏sortable的还原动画.

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.

它不像我希望的那样干净，因为我实际上仍然在执行sortable的还原功能(而不是取消它)，但是直到有人有更好的主意为止.

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.

以下代码:

// 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:如何在成功放下可放置元素时取消可排序元素的还原?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！