H5 を使用してドラッグ アンド ドロップ効果を実現する方法

今回は、H5 を使用してドラッグ アンド ドロップ効果を実現する方法と、H5 を使用してドラッグ アンド ドロップ効果を実現するための 注意点 について説明します。以下は実際的なケースです。一見。

ドラッグ アンド ドロップ

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

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

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

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

例:

nbsp;html>  
  
  
    <title>拖放</title>  
    <style>  
        #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>  
  
  
    <p></p>  
    <br>  
    <img  src="/static/imghwm/default1.png" data-src="img/bg_1.jpg" class="lazy" alt="H5 を使用してドラッグ アンド ドロップ効果を実現する方法" >  
  

まず、要素をドラッグ可能にするために、

draggable 属性 を true に設定します。 = "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つの間を前後にドラッグしたい場合上記のコードを少し変更するだけです。 本文のコードを次のように変更します。

  
    <p>  
    <img  src="/static/imghwm/default1.png" data-src="img/bg_1.jpg" class="lazy" alt="H5 を使用してドラッグ アンド ドロップ効果を実現する方法" ></p>  
    <p></p>  

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

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

このようにして、前後にドラッグ アンド ドロップできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

ページングクエリの使用方法の詳細な説明

文字と数学関数の関係

以上がH5 を使用してドラッグ アンド ドロップ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。