HTML5 のドラッグ アンド...LOGIN

HTML5 のドラッグ アンド ドロップ

ドラッグ アンド ドロップ は、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。

HTML5 ではドラッグ アンド ドロップが標準の一部であり、あらゆる要素をドラッグ アンド ドロップできます。

ドラッグ アンド ドロップは HTML5 標準の一部です。


ブラウザのサポート

8.jpg


Internet Explorer 9以降、Firefox、Opera、Chrome、Safariはドラッグをサポートしています。

注: Safari 5.1.2 はドラッグをサポートしていません。


HTML5 のドラッグ アンド ドロップの例

次の例は、単純なドラッグ アンド ドロップの例です:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style type="text/css">
        #div1 {width:300px;height:200px;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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" width="300" height="200">
</body>
</html>

プログラムを実行して画像をドラッグしてみます。


プログラムは少し複雑に見えるかもしれませんが、ドラッグ アンド ドロップ イベントのさまざまな部分を個別に学習できます。

要素をドラッグ可能に設定します

まず、要素をドラッグ可能にするために、draggable 属性を true に設定します:

<imgraggable="true">

何をドラッグするか - ondragstart と setData()

次に、要素がドラッグされたときに何が起こるかを指定します。

上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。

dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:

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

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


どこに配置するか - ondragover

ondragover イベントは、ドラッグされたデータを配置する場所を指定します。

デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。

これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます。

ドラッグしたデータを配置する場合ドロップイベントが発生するとき。

上記の例では、ondrop 属性は関数、drop(event) を呼び出します:

function drop(ev)

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

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

コードの説明:

ブラウザのデフォルトのデータ処理 (ドロップイベント) を回避するには、preventDefault() を呼び出します。動作はリンクとして開くことです)

  • dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータ セットを返します。

  • ドラッグされたデータはドラッグされた要素のIDです(「drag1」)

  • ドラッグされた要素を配置された要素(ターゲット要素)に追加します


  • 方法2 つの

    要素の間に画像をドラッグ アンド ドロップします。

    すごい

    プログラムを実行して試してください



    次のセクション
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #div1, #div2 {float:left; width:200px; height:205px; margin:10px;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> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="190" height="190"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
    コースウェア