HTML5 ドラッグアンドドロップ機能の実装コード-H5 チュートリアル-php.cn

HTML5 ドラッグアンドドロップ機能の実装コード

黄舟

リリース： 2017-02-20 13:35:33

オリジナル

1447 人が閲覧しました

HTML5ではドラッグアンドドロップが標準であり、具体的な内容は以下の通りです
1. ドラッグアンドドロップ

2. 要素を設定します。ドラッグアンドドロップ可能にする

まず、要素をドラッグ可能にするために、draggable 属性を true に設定します:
3. ドラッグするもの - ondragstart と setData()

次に、要素がドラッグされたときに何が起こるかを指定します。上の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。 dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:

<!DOCTYPE HTML>  

    <html>  

    <head>  

    <style type="text/css">  

    #p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   

    </style>  

    <script>  

    function allowDrop(ev)   

    {   

    ev.preventDefault();   

    }   

    function drag(ev)   

    {   

    ev.dataTransfer.setData("Text",ev.target.id);   

    }   

    function drop(ev)   

    {   

    ev.preventDefault();   

    var data=ev.dataTransfer.getData("Text");   

    ev.target.appendChild(document.getElementById(data));   

    }   

    </script>  

    </head>  

    <body>  

    <p>拖动 W3CSchool.cc 图片到矩形框中:</p>  

    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  

    <br>  

    <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  

    </body>  

    </html>

ログイン後にコピー

この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。）。

4. 配置場所 - ondragover

ondragover イベントは、ドラッグされたデータを配置する場所を指定します。デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます: event.preventDefault()

5. 配置 - ondrop

ドラッグされたデータが配置されると、drop イベントが発生します。上記の例では、ondrop 属性は関数 Drop(event) を呼び出します。

function drag(ev)   

    {   

       ev.dataTransfer.setData("Text",ev.target.id);   

    }

ログイン後にコピー

コードの説明:

ブラウザのデフォルトのデータ処理 (ドロップイベントのデフォルト) を避けるために、preventDefault() を呼び出します。動作はリンクとして開かれます)。 dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータセットを返します。ドラッグされたデータは、ドラッグされた要素の ID (「drag1」) です。ドラッグした要素をドロップした要素（ターゲット要素）に追加します。

上記は HTML5 ドラッグアンドドロップ機能の実装コードの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

-->

HTML5 ドラッグ アンド ドロップ機能の実装コード

HTML5 ドラッグアンドドロップ機能の実装コード