ホームページ > 記事 > ウェブフロントエンド > HTML5のドラッグ＆ドロップ機能例を詳しく解説

HTML5のドラッグ＆ドロップ機能例を詳しく解説

零下一度オリジナル: 2017-07-16 15:37:271608ブラウズ

HTML5 は専用のドラッグアンドドロップ API を提供するため、今後この種の効果を実現するためにあれこれいじる必要はなくなります。ただし、Opera ブラウザーはこれに興味がないようで、その汎用性にはまだ疑問の余地があることを考慮すると、ここでは簡単に説明します。ドラッグアンドドロップは html5 標準の一部です。

ブラウザのサポート

Internet Explorer 9、Firefox、Opera 12、Chrome、Safari 5 はドラッグアンドドロップをサポートしています。

ドラッグされた要素、dragElement:

1. イベントを追加: ondragstart

2. 属性を追加: dragable

要素を追加、dropElement:

1. イベントを追加: ondargenter、ondragover、ondragleave、ondragend、ondrop

はマウスのインとアウトなどのイベントに非常に似ており、言葉は理解しやすいので、以下に例を使用して説明します。

1. ページ上の要素間でドラッグアンドドロップします

以下は、各イベントがどのようにトリガーされるかを示す、p 間のドラッグアンドドロップの小さな例です:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>

    <style type="text/css">

        #dropEle
        p
        {
            float: left;
        }

    </style>

    <script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>


    <script type="text/javascript">

        /**
         * 拖放（Drag 和 drop）是 HTML5 标准的组成部分。
         * 浏览器支持
         *Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
         */
        $(function ()
        {
            $("#dragEle")[0].ondragstart = function (event)
            {
                console.log("dragStart");
                event.dataTransfer.setData("Text", event.target.id);
            };

            /**
             * 当放置被拖数据时，会发生 drop 事件。
             * 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
             * @param event
             */
            $("#dropEle")[0].ondrop = function (event)
            {
             /*   for (var p in event.dataTransfer)
                {
                    console.log(p + " = " + event.dataTransfer[p] + " @@");
                }
            */
                console.log("onDrop");
                var id = event.dataTransfer.getData("Text");
                $(this).append($("#" + id).clone().text($(this).find("p").length));
                event.preventDefault();
            };

            /**
             * ondragover 事件规定在何处放置被拖动的数据。
             *默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
             */
            $("#dropEle")[0].ondragover = function (event)
            {
                console.log("onDrop over");
                event.preventDefault();
            }

            $("#dropEle")[0].ondragenter = function (event)
            {
                console.log("onDrop enter");
            }

            $("#dropEle")[0].ondragleave = function (event)
            {
                console.log("onDrop leave");
            }

            $("#dropEle")[0].ondragend = function (event)
            {
                console.log("onDrop end");
            }


        });

    </script>

</head>
<body>

<p style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
     draggable="true" id="dragEle" >

</p>


<p style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
     id="dropEle"></p>


</body>
</html>

注意すべき点がいくつかあります:

a、 ondragover イベントのデフォルトの動作は整理する必要があり、デフォルトではデータ/要素を他の要素に配置することはできません。

b. ドロップイベントのデフォルトの動作はリンクとして開くことなので、そのデフォルトの動作も防ぐ必要があります。

また、ドラッグアンドドロップの際、イベントには、event.dataTransfer オブジェクトが含まれていることに注意してください。上記の例では、オブジェクトの setData メソッドを使用して、ドラッグされた p の ID を渡し、その ID を取得しました。ドロップすると、要素がコピーされ、配置された p に追加されます。

以下は、このオブジェクトの他のメソッドを紹介します:

event.dataTransfer:

items = [object DataTransferItemList] @@drag_drop.html:44

files = [object FileList] @@drag_drop.html:44

types = text/plain @@drag_drop.html:44

effectAllowed = all @@drag_drop.html:44

dropEffect = none @@drag_drop.html:44

clearData = function clearData() { [ネイティブコード] } @ @drag_drop.html:44

getData = function getData() { [ネイティブコード] } @@drag_drop.html:44

setData = function setData() { [ネイティブコード] } @@drag_drop.html:44

setDragImage = function setDragImage() { [ネイティブコード] } @@

すべての属性を出力するために js を使用しました:

1. 上記の例では getData、setData が使用されており、clearData は設定されたデータをクリアするために使用されます。

2. オペレーティングシステムで選択された 1 つ以上のファイルが p にドラッグされると、ドラッグされたファイルの情報がファイルに保存され、ファイルの種類と長さを取得できることに注意してください。ファイルがアップロードされます。

3. setDragImage(image, x, y) は、マウスの移動中にマウスと一緒に移動するエフェクト画像を設定するために使用されます。ドラッグスタートで設定する必要があります。

4. Types、effectAllowed、dropEffect はそれぞれ、ドラッグされた要素のタイプと、ドラッグ処理中にマウスによって表示されるスタイルです。これらの属性は無視できるため、通常は使用されないと思います。

関連キーポイント

DataTransfer オブジェクト: ドロップオブジェクトの転送に使用される媒体 (通常は Event.dataTransfer)。

draggable 属性: タグ要素は、draggable=true に設定する必要があります。そうでない場合は、効果がありません。例:

580329107d53b3b74092afaeb35a92a5List 116b28748ea4df4d9c2150843fecfba68

ondragstart イベント: ドラッグ要素がドラッグされ始めたときにトリガーされるイベント。

ondragenter イベント: ドラッグされた要素がターゲット要素に入ったときにトリガーされるイベント。

ondragover イベント: ドラッグされた要素がターゲット要素上で移動したときにトリガーされるイベント

ondrop イベント: ドラッグされた要素がターゲット要素上で移動し、マウスが放されたときにトリガーされるイベント。このイベントはターゲット要素に作用します。

ondragend イベント: ドラッグされた要素に作用します。

Event.preventDefault() メソッド: いくつかのメソッドの実行を防ぎます。デフォルトのイベントメソッド。 PreventDefault() は ondragover で実行する必要があります。そうしないと、ondrop イベントはトリガーされません。さらに、他のアプリケーションやファイル、特に画像から何かをドラッグした場合、デフォルトのアクションでは画像または関連情報が表示され、実際にはドロップは実行されません。現時点では、ドキュメントの ondragover イベントを使用してドキュメントを直接強制終了する必要があります。

Event.effectAllowed 属性: ドラッグの効果です。

以上がHTML5のドラッグ＆ドロップ機能例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：HTML5ビデオ再生チュートリアルの例次の記事：HTML5ビデオ再生チュートリアルの例

続きを見る