36

HTML5 ドラッグ & ドロップの本当に良いチュートリアルを知っている人はいますか? toDo リストを作成していて、この API を使用して並べ替え/並べ替えできるようにしたいと考えています。私は狂った男のようにグーグルで検索してきましたが、今はあきらめ始めています...どんなヒントでも大歓迎です! ありがとう！

ps jQuery-sortable() ではなく、html5 のドラッグ アンド ドロップ API を使用したい

4

4 に答える 4

71

このサンプルはできるだけシンプルにしようとしました。

HTML リストを作成する場合:

<ul>
  <li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Apples</li>
  <li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Oranges</li>
  <li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Bananas</li>
  <li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Strawberries</li>
</ul>

...そして次のJavaScript：

var _el;

function dragOver(e) {
  if (isBefore(_el, e.target))
    e.target.parentNode.insertBefore(_el, e.target);
  else
    e.target.parentNode.insertBefore(_el, e.target.nextSibling);
}

function dragStart(e) {
  e.dataTransfer.effectAllowed = "move";
  e.dataTransfer.setData("text/plain", null); // Thanks to bqlou for their comment.
  _el = e.target;
}

function isBefore(el1, el2) {
  if (el2.parentNode === el1.parentNode)
    for (var cur = el1.previousSibling; cur && cur.nodeType !== 9; cur = cur.previousSibling)
      if (cur === el2)
        return true;
  return false;
}

...ソート可能なリストを取得する必要があります。

https://codepen.io/crouchingtigerhiddenadam/pen/qKXgapでコードを試すことができます

FireFox の次のバグに注意してください: https://developer.mozilla.org/en-US/docs/Web/Events/dragenter

お役に立てれば。

于 2015-03-10T11:16:41.910 に答える
8

最初から最後までのチュートリアルについては、http：//taximeeting.tumblr.com/post/26539340142/lightweight-jquery-plugin-for-html5-sortable-listsを確認してください。

html5sortableこれは、http ：//farhadi.ir/projects/html5sortable/に基づいています。HTML5のドラッグアンドドロップに関するもう1つの優れたチュートリアルは、http ：//www.html5rocks.com/en/tutorials/dnd/basics/にあります。

于 2012-07-05T22:40:50.593 に答える
2

adamfによるソリューション(15 年 3 月 10 日 11:16) を使用し、それをテーブルの行で使用する場合は、draenter関数を次のように置き換えます。

function dragenter(e) {
    var target = e.target;
    while (target.parentNode.tagName != 'TBODY') {
        target = target.parentNode;
    }

    if (isbefore(source, target)) {
        target.parentNode.insertBefore(source, target);
    }
    else {
        target.parentNode.insertBefore(source, target.nextSibling);
    }
}

このように、ターゲットは TR 要素にのみ適用され、その子要素には適用されません。

li要素に子がある場合、同じことがul > li構造に適用されます。

img子要素がある場合は、それぞれにdraggable="false"属性を追加します。

于 2016-11-26T15:26:50.097 に答える