HTML5ドラッグアンドドロップAPIをドラッグアンドドロップソートのサンプルコードを実装する

HTML5は、ドラッグアンドドロップ効果を実現するために非常に便利です。さまざまなドラッグアンドドロップ機能を実現します。

特定の要素をドラッグアンドドロップする場合は、要素のドラッグ可能なプロパティを誤っている場合、ドラッグアンドドロップは許可されません。 IMG要素と要素は、これらの2つの要素をドラッグアンドドロップしたくない場合は、属性をfalseに設定することができます。

ドラッグアンドドロップインシデントは、さまざまな要素によって生成されます。要素がドラッグされて落とされ、最終的に彼は多くの要素に配置したい要素に到達する可能性があります。ここでは、ドラッグとドロップの要素とプロセスの要素を一時的に参照し、到達した要素はターゲットオブジェクトと呼ばれます。オブジェクトごとに異なるドラッグアンドドロップイベントがあります。

ソースオブジェクト：

1. Dragstart：ソースオブジェクトはドラッグアンドドロップを開始します。
2. ドラッグ：ソースオブジェクトのドラッグアンドドロップ中。
3. ドラッグエンド：ソースオブジェクトはドラッグアンドドロップします。

プロセスオブジェクト：

1. Dragenter：ソースオブジェクトはプロセスの範囲に入り始めます。
2. Dragover：ソースオブジェクトは、プロセスの範囲内で移動します。
3. DragLeave：ソースのオブジェクトの範囲はプロセスを離れます。

ターゲットオブジェクト：

1. ドロップ：ソースオブジェクトがドラッグされ、ターゲットオブジェクトにドロップされます。

 <div id = source draggable = true> a要素</div> <div id = process> b要素</div> <div id =ターゲット> c要素</div> <script> var source = document.getElementbyid '（ 'source'）、//要素proces = document.getElementbyid（ 'process'）、// b要素ターゲット= gelementbyid（ 'ターゲット'）; dragstartイベントはA要素によって生成され、console.log（ '要素がドラッグされ始めます'）要素ログ（ '要素は要素を入力し始めます'） 、false）target.addeventlistener（ 'drop'、function（ev）{//ドロップイベントはconsole.logによって生成されます（ 'c element to c要素'）; ）;} </script>

データ送信オブジェクトのデータアト率をすべてのドラッグおよびドロップイベントで提供して、ソースオブジェクトとターゲットオブジェクト間でデータを渡すことができます。次に、このオブジェクトのメソッドと属性を知り、データがどのように送信されるかを理解してください。

このメソッドは、DatAtransferオブジェクトに保存されます。 2つのパラメーターを受信します。最初のパラメーターは、データの種類を保存する文字列を示し、次のことをサポートします。

1. テキスト/プレーン：テキストテキスト。
2. テキスト/HTML：HTMLテキスト。
3. テキスト/XML：XMLテキスト。
4. Text/URI-List：URLリスト、各URLは1行です。

2番目のパラメーターは、保存するデータです。例えば：

 event.datatransfer.setdata（ 'text/plain'、 'hello world'）;

このメソッドは、DatAtransferオブジェクトからデータを読み取ります。パラメーターは、SetDataで指定されたデータのタイプです。例えば：

 event.datatransfer.getData（ 'Text/Plain'）;

このメソッドは、DatAtransferオブジェクトに保存されているデータを削除します。データ型のパラメーターはオプションです。パラメーターが空の場合、すべてのタイプのデータをクリアします。例えば：

 event.datatransfer.cleardata（）;

この方法は、IMG要素を使用してアイコンをドラッグアンドドロップするように設定されています。 3つのパラメーターを受信し、1つ目はアイコン要素、2つ目はマウスポインターからのアイコン要素のx軸変位、3つ目はマウスポインターからのアイコン要素のy軸変位です。例えば：

 var source.getElementbyid（ 'source'）、document.createelement（ 'img'）; 10、-10）}、false）

これらの2つの属性を組み合わせて、ドラッグアンドドロップの視覚効果を設定します。

IEがDataTransferオブジェクトをサポートしていないことは注目に値します。はい、どのIEバージョンがサポートされていても。

ドラッグアンドドロップAPIの使用は、すでに上記に精通しています。最初にアイデアを見てみましょう：

1. 1つのリストでは、各要素をドラッグしてドロップすることができ、ドラッグ可能なプロパティは各要素に対してTRUEに設定されます。
2. ソースオブジェクトのスタイルを区別するために、各要素のドラッグスタートイベントを調査します。
3. 各要素のDragenterイベントを監視すると、ソースオブジェクトが現在の要素に入ると、ソースオブジェクトが要素の前に追加されます。このようにして、その背後にある要素はソースオブジェクトによって絞り込まれ、ソート効果が達成されます。
4. ただし、ソースオブジェクトを最後のオブジェクトにランク付けすることはできず、最後から2番目にしかランク付けできないことがわかります。この時点で、DragLeaveイベントが監視されます。プロセスオブジェクトが最後の要素である場合、ソースオブジェクトはプロセスオブジェクトを残し、ソースオブジェクトを最後に追加します。

メインコードは次のとおりです。

 var source = document.queryselectiverall（'。list '）、dragelement = null; ）{dragelement = this;}、false）; addeventlistener（ 'dragenter'、function（ev）{if（dragelement！= this）{this.parentNodefore（dragelemememememermeremeremeremer、this）;}}、false） [i] .addeventlistener（ 'dragleave'、function（ev）{if（dragelement！= this）{if（this == this.parentnode.lastelementchildchild || this.parentnod e.lastchild）{this.parentnode.appendchild（dragelementement ）;}、false）};

フルコードアドレス：ドラッグデモ

これは主にIEで互換性がありますが、少なくともIE10ではドラッグしてソートすることができます。

そして、私の簡単なテストでは、IEで要素が設定されていない場合、dragleaveイベントがトリガーされないことがわかります。

より重要なポイントは、iOSとAndroidであり、これは完全に互換性がありません。幸いなことに、モバイルエンドで完全に互換性のあるプラグインがあります。

プラグインアドレス：iOS-html5-drag-drop-shim

元のコードにプラグインを導入するだけで、モバイル端末にドラッグする必要があります。

 <Script> var IOSDRAGDROPSHIM = {ENABLENERLAVE：true} </script> <scrip src = vendor/ios-drop.js> </script>

上記は、この記事のすべての内容です。