3

sortableユーザーが並べ替えることができるようにする必要があるいくつかの要素のリストがあります。

または、要素を5つの使用可能なドロップゾーン（droppableコンテナ）にドラッグすることもできます。

私が遭遇している問題はこれです：ドロップがdroppableゾーンで正常に行われたとき、の復帰アニメーションsortableはまだ再生されており、ドロップされた要素をsortableリストに戻します。

代わりに、Macのゴミ箱にファイルをドラッグするように、ヘルパーがdrop発生した場所から取得されてゾーンにアニメーション化されるようにアニメーション化したいと思います。droppable

後者が機能するためには、しかし私はする必要があります：

  1. ドロップが成功したら、元に戻すアニメーションを停止します。
  2. ドロップされた要素の座標をコピーし、ドロップ可能な要素の中心にカスタムアニメーションを起動します。

この問題はパート（1）内にありdraggable、「無効」または「有効」フラグをオンにできますrevertが、できsortableません。

これをどのように達成できるかについてのアイデアはありますか？

4

1 に答える 1

1

したがって、少し前後した後、元のui.helper要素（sortable作成する）を複製し、このクローン（明らかに元に戻されない）を使用して、元のヘルパーを削除しながらカスタムアニメーションシーケンスを終了することで、これを解決することができました。の復帰アニメーションを非表示にするプレースホルダー（によって作成sortable） 。sortable

sortable's 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 に答える