ホームページ > 記事 > ウェブフロントエンド > HTML5ドラッグ＆ドロップ効果の実装コード

HTML5ドラッグ＆ドロップ効果の実装コード

黄舟オリジナル: 2017-02-21 13:11:201419ブラウズ

ドラッグアンドドロップ

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

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

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

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

例:

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </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 id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
    <br />  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" />  
</body>  
</html>

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

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

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

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

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

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

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

コードの説明:

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

前後にドラッグします:
2つの間を前後にドラッグしたい場合上記のコードを少し変更するだけです:

<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" /></p>  
    <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
</body>

次に、スタイルに #p2 を追加します:

<style type="text/css">  
        #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>

この方法で実現できます。行ったり来たり。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5タグコレクション次の記事：HTML5タグコレクション

続きを見る

HTML5ドラッグ＆ドロップ効果の実装コード

関連記事