JavaScript のドラッグ アンド ドロップの問題

ナスコ・チャチョフ

現在、独自のドラッグ アンド ドロップ アプリを作成しようとしています (js ドラッグ アンド ドロップ API を学習できるように作成しています)。それでは、私の問題をコードで説明しましょう。以下にjsfiddleがあります。

JSFIDDLEはこちら!

ご覧のとおり、ユーザーは<div id="drag-end"></div>エリア内のさまざまなシャツをドラッグできます

この領域に既存の要素がある場合 (最初のシャツ ドロップ)、新しいアイテムをドロップしようとすると、その<div id="drag-end"></div>領域にのみドロップでき、既存のシャツにドラッグしても置換できません。それを修正する方法について何かアイデアはありますか? CSS で z-indexes を試してみましたが、うまくいかないので、それはちょっとばかげた考えのようです。dnd API のチュートリアル/アイデアも受け取ります。これは、私が初めてで、まだすべて自分でやろうとしているためです。ありがとう

パル・シン

JavaScript イベント委任を使用すると、この問題を簡単に解決できます。また、ドキュメントにイベントをバインドする代わりに、div 要素をターゲットにする必要があります。また、いくつかのイベントをリッスンする必要もありません。フィドルをチェックアウト

お気に入り:

document.getElementById('drag-end').addEventListener('drop'...

ここでフィドルを更新しました

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Javascriptのドラッグアンドドロップ機能の問題

分類Dev

JavascriptでのUnicodeのドラッグアンドドロップに関する問題

分類Dev

HTML5要素とJavaScriptの問題をドラッグアンドドロップします

分類Dev

ListBoxMultiSelectドラッグアンドドロップの問題

分類Dev

ドラッグアンドドロップIIの問題

分類Dev

jqxwidgetsjqxtreeドラッグアンドドロップの問題

分類Dev

ドラッグアンドドロップの問題TIBCOBusinessWorks 6.4

分類Dev

ドラッグ中のドラッグアンドドロップの問題

分類Dev

javascriptのドラッグアンドドロップのポップアップウィンドウ

分類Dev

ステートメントの問題の場合、Javascriptをドラッグアンドドロップします

分類Dev

New FabricJSでの画像のドラッグアンドドロップの問題

分類Dev

角度のあるドラッグアンドドロップの問題

分類Dev

jQueryドラッグアンドドロップカートの問題

分類Dev

ドラッグ アンド ドロップ API の問題または?

分類Dev

CSS/Javascript ドロップダウン メニューの問題

分類Dev

ファイルアップロードのドラッグアンドドロップの問題

分類Dev

Javascriptのクリックアンドトグルクラスの問題

分類Dev

JavaScriptでのドラッグアンドドロップアイテムのスナップ

分類Dev

剣道UIグリッド複数選択ドラッグアンドドロップの問題

分類Dev

JavaScript-ドラッグアンドドロップ

分類Dev

Javascriptカスケードドロップダウン読み込みの問題

分類Dev

CSSフレックスボックス内のAngularCDKドラッグアンドドロップの問題

分類Dev

javascriptのドラッグアンドドロップ-要素が別のドロップ可能な要素にドロップするのを防ぎます

分類Dev

ドラッグアンドドロップ後のJavascriptオブジェクトへのアクセス

分類Dev

Jqueryのドラッグアンドドロップスクロールバーの問題

分類Dev

Javascriptポップアップウィンドウフォーカスの問題

分類Dev

jQueryのドラッグアンドドロップの問題-divIDとクラスに依存

分類Dev

純粋にjavascriptを使用したdivタグのドラッグアンドドロップ機能

分類Dev

純粋にjavascriptを使用したdivタグのドラッグアンドドロップ機能

Related 関連記事

  1. 1

    Javascriptのドラッグアンドドロップ機能の問題

  2. 2

    JavascriptでのUnicodeのドラッグアンドドロップに関する問題

  3. 3

    HTML5要素とJavaScriptの問題をドラッグアンドドロップします

  4. 4

    ListBoxMultiSelectドラッグアンドドロップの問題

  5. 5

    ドラッグアンドドロップIIの問題

  6. 6

    jqxwidgetsjqxtreeドラッグアンドドロップの問題

  7. 7

    ドラッグアンドドロップの問題TIBCOBusinessWorks 6.4

  8. 8

    ドラッグ中のドラッグアンドドロップの問題

  9. 9

    javascriptのドラッグアンドドロップのポップアップウィンドウ

  10. 10

    ステートメントの問題の場合、Javascriptをドラッグアンドドロップします

  11. 11

    New FabricJSでの画像のドラッグアンドドロップの問題

  12. 12

    角度のあるドラッグアンドドロップの問題

  13. 13

    jQueryドラッグアンドドロップカートの問題

  14. 14

    ドラッグ アンド ドロップ API の問題または?

  15. 15

    CSS/Javascript ドロップダウン メニューの問題

  16. 16

    ファイルアップロードのドラッグアンドドロップの問題

  17. 17

    Javascriptのクリックアンドトグルクラスの問題

  18. 18

    JavaScriptでのドラッグアンドドロップアイテムのスナップ

  19. 19

    剣道UIグリッド複数選択ドラッグアンドドロップの問題

  20. 20

    JavaScript-ドラッグアンドドロップ

  21. 21

    Javascriptカスケードドロップダウン読み込みの問題

  22. 22

    CSSフレックスボックス内のAngularCDKドラッグアンドドロップの問題

  23. 23

    javascriptのドラッグアンドドロップ-要素が別のドロップ可能な要素にドロップするのを防ぎます

  24. 24

    ドラッグアンドドロップ後のJavascriptオブジェクトへのアクセス

  25. 25

    Jqueryのドラッグアンドドロップスクロールバーの問題

  26. 26

    Javascriptポップアップウィンドウフォーカスの問題

  27. 27

    jQueryのドラッグアンドドロップの問題-divIDとクラスに依存

  28. 28

    純粋にjavascriptを使用したdivタグのドラッグアンドドロップ機能

  29. 29

    純粋にjavascriptを使用したdivタグのドラッグアンドドロップ機能

ホットタグ

アーカイブ