HTML5ネイティブのドラッグ＆ドロップ操作の詳細説明

最近のプロジェクト開発ではH5のドラッグ＆ドロップ機能を使用しましたが、既存のプロジェクトではVUEファミリーのバケットを使用しているため、vuedrableプラグインを使用しましたが、プロセス全体が非常に面倒です。そこで、H5 ドラッグ アンド ドロップの原理を研究し、それをデータ駆動型フレームワークに適用することにしました。 H5 でドラッグ アンド ドロップ操作を実装するには、少なくとも 2 つの手順が必要です。 1) ドラッグ アンド ドロップする object 要素の draggable 属性を true に設定します (img 要素と a 要素はデフォルトでドラッグ アンド ドロップを許可します)。関連するイベント処理コードをドラッグします。テストの便宜のために、最初に jQuery ライブラリを使用して、基本的なドラッグ アンド ドロップ機能を完成させます。

マウスを押したままドラッグ可能な要素をドラッグすると、次の順序でトリガーされます。

ドラッグスタート -> ドラッグ -> ドラッグエンド

1. ragstart: マウスが押されてドラッグが開始されるとトリガーされます (1 回トリガーされます)。
2. ドラッグ: マウスを押したままドラッグしているときにトリガーされます (継続的にトリガーされます)。
3. ドラッグエンド: マウスを放した後にトリガーされます (要素が有効な配置ターゲットに配置されたか、無効な配置ターゲットに配置されたかに関係なく)

ドラッグ可能な要素がコンテナにドラッグされると、次の順序でトリガーされます。

ドラッグエンター -> ドラッグオーバー -> ドロップ

dragenter: 要素がドロップ ターゲットにドラッグされている限り、dragenter イベントがトリガーされます。

ドラッグオーバー: ドラッグエンターの後にはドラッグオーバー イベントが続き、ドラッグされた要素がドロップ ターゲットの範囲内で移動している間、このイベントはトリガーされ続けます。

ragleave: 要素が配置ターゲットの外にドラッグされると、dragleave がトリガーされます。

drop: ドラッグされた要素がターゲット要素上に配置されたときに発生します

要素のドラッグの開始からターゲット領域への要素の配置まで、次の順序でトリガーされます。

ドラッグスタート -> ドラッグ -> ドラエンター -> ドラッグオーバー -> ドラグリーブ -> ドロップ -> ドラジェンド

要素にdragable 属性を直接追加すると、Chrome や Opera では直接ドラッグできますが (矢印が + 記号に変わるなどのリリース操作はありません)、Firefox では応答がありません。

 <ul class=canDrog> <liraggable=true id=1>非常</li> <liraggable=true id=2>良い</li> <liraggable=true id=3>中</li> <li raggable=true id=4>悪い</li> </ul> <script> // JS コードがありません</script>

この問題を解決するには、dragstart イベント ハンドラーをドラッグ要素にバインドし、この関数でevent.dataTransfer.setData 関数を呼び出す必要があります。

 <script> <ul class=canDrog> <liraggable=true id=1>非常</li> <liraggable=true id=2>良い</li> <liraggable=true id=3>中</li> > <liraggable=true id=4>違い</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefoxドラッグ アンド ドロップ通信に使用される dataTransfer オブジェクトにアクセスする必要があります。event.dataTransfer.setData(Text,'1');</script>

リリース可能なロゴはオペレーティング システムによって異なる場合があります。Mac Chrome では、白い「+」が埋め込まれた円形のロゴとして表示されます。

解決策は、dragover イベントをコンテナにバインドすることです。

 <ul class=canDrog> <liraggable=true id=1>非常</li> <liraggable=true id=2>良い</li> <liraggable=true id=3>中</li> <li raggable=true id=4>差分</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>セクション/週</th> <th>月曜日</th> <th>火曜日</th> <th>水曜日</th> <th>木曜日</th> <th>金曜日</th> </tr> </thead> <tbody > <tr> <td>セクション 1</td> <tdraggable=true ></td> <tdraggable=true ></td> <tdraggable=true ></td> <tdraggable=true >< /td> <td raggable=true ></td> </tr> <!--ここでは省略--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //firefox はドラッグ アンド ドロップ通信に使用される dataTransfer オブジェクトにアクセスする必要があります。event.dataTransfer.setData(Text,'1') }); Chrome と Opera では $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script> を追加する必要があります。

Firefox を使用しているときにドラッグした要素を放すと、デフォルトのブラウザーは次のように新しいタブを開きます。

これは、ブラウザがドロップ コールバック関数の後にデフォルトの動作を実行するためです。通常の解決策は、デフォルト イベントの実行を防止し、ドラッグ コンテナのドロップ フックでのバブリングを防止するコードを追加することです。

 <script> //要素を現在の要素に解放します $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop');event.preventDefault (); イベント.stopPropagation() });

ただし、ドラッグ可能な要素を他の場所にドラッグすると、新しいタブを開く問題が引き続き発生します。この場合、上記のコードをすべてのコンテナに追加できます。

ソースコード: https://github.com/pluslicy/drag

後で、vedraggable プラグイン ライブラリを学習し、それを vue フレームワークに適用します。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。