ホームページ  >  記事  >  ウェブフロントエンド  >  html5でのドラッグ&ドロップのサンプルコードを詳しく紹介

html5でのドラッグ&ドロップのサンプルコードを詳しく紹介

黄舟
黄舟オリジナル
2017-03-15 15:42:471476ブラウズ

1) ソースプロジェクトを作成します

1.1) ドラッグ可能な属性の値:

true - この要素はドラッグできます。

false - この要素はドラッグできません。 オート- ブラウザは要素をドラッグできるかどうかを決定できます。

1.2) ドラッグされた要素の イベント:

要素のドラッグが開始されるときにトリガーされます。要素がドラッグされます。

ドラッグend—ドラッグ操作が完了するとトリガーされます

2) リリースエリアを作成します

2.1) リリースエリアイベント:

ドラッグ操作が完了するとトリガーされます。ドラッグされた要素がリリース領域によって占有されている画面スペースに入ったとき;

ドラッグオーバー - ドラッグされた要素がリリース領域内で移動したときにトリガーされます。

drop - ドラッグされた要素がリリース領域にドロップされるとトリガーされます。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = document.getElementById("src");
            var target = document.getElementById("target");
            var msg = document.getElementById("msg");
          
            var draggedID;
          
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var newElem = document.getElementById(draggedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                draggedID = e.target.id;
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>

3) DataTransfer を使用します

Object

3.1) によってトリガーされるイベントと同時に送出されるオブジェクトドラッグ アンド ドロップ操作は、MouseEvent から派生した DragEvent です。

DragEvent オブジェクトによって定義される追加のプロパティ:

dataTransfer - リリース領域にデータを転送するために使用されるオブジェクト (DataTransfer) を返します。

3.2) DataTransfer オブジェクトによって定義されるプロパティ:

タイプ—データの形式を返します。

getData(0313a12b65aa20a048ec62b8cf470fd2)— 指定された形式でデータを返します。

setData(0313a12b65aa20a048ec62b8cf470fd2,

clear

Data(0313a12b65aa20a048ec62b8cf470fd2) - 指定された形式でデータを削除します。

files - ドラッグされたファイルのリストを返します。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = document.getElementById("src");
            var target = document.getElementById("target");
                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var droppedID = e.dataTransfer.getData("Text");               
                var newElem = document.getElementById(droppedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                e.dataTransfer.setData("Text", e.target.id);
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>
3.3) ファイルをドラッグ アンド ドロップします。

File オブジェクトによって定義されるプロパティ name - ファイル名を取得します

type - MIME で表されるファイル タイプを取得します。 type;

size—ファイルサイズを取得します (バイト単位)。

以上がhtml5でのドラッグ&ドロップのサンプルコードを詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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