HTML5 ドラッグ アンド ドロップ API 実装のドラッグ アンド ドロップ並べ替えサンプル コード

HTML5 は直接ドラッグ アンド ドロップ API を提供するため、大量の JS を記述する必要がなく、ドラッグをリッスンするだけで済みます。要素の イベント を使用して、さまざまな機能を実現します。

はじめに

HTML5 は直接ドラッグ アンド ドロップ API を提供するため、大量の JS を記述する必要はなく、聞くだけで済みます。要素のドラッグ アンド ドロップ イベントを使用して、さまざまな効果を実現します。

要素をドラッグ アンド ドロップする場合は、要素のドラッグ可能な 属性 を true に設定する必要があります。この属性が false の場合、ドラッグ アンド ドロップは許可されません。 img 要素と a 要素は両方とも、draggable 属性がデフォルトで true に設定されているため、これら 2 つの要素をドラッグ アンド ドロップしたくない場合は、属性を false に設定するだけで直接ドラッグ アンド ドロップできます。

ドラッグ アンド ドロップ イベント

ドラッグ アンド ドロップ イベントはさまざまな要素によって生成されます。要素をドラッグ アンド ドロップすると、最終的に配置する要素に到達するまでに多くの要素を通過することがあります。ここでは、ドラッグアンドドロップされた要素をソース オブジェクト と仮に呼び、渡された要素をプロセス オブジェクト、到着した要素をターゲット オブジェクトと呼びます。オブジェクトが異なれば、生成されるドラッグ アンド ドロップ イベントも異なります。

ソース オブジェクト:

1. dragstart: ソース オブジェクトのドラッグ アンド ドロップが開始されます。

2. drag: ソースオブジェクトのドラッグアンドドロッププロセス中。

3. dragend: ソースオブジェクトのドラッグアンドドロップが終了します。

プロセス オブジェクト:

1. dragenter: ソース オブジェクトがプロセス オブジェクトのスコープに入り始めます。

2. dragover: ソースオブジェクトはプロセスオブジェクトのスコープ内で移動します。

3. dragleave: ソース オブジェクトはプロセス オブジェクトのスコープを離れます。

ターゲットオブジェクト:

1. ドロップ: ソースオブジェクトがターゲットオブジェクトにドラッグアンドドロップされます。

<p id="source" draggable="true">a元素</p>
<p id="process">b元素</p>
<p id="target">c元素</p>

<script>
    var source = document.getElementById(&#39;source&#39;),     // a元素
        process = document.getElementById(&#39;process&#39;),   // b元素
        target = document.getElementById(&#39;target&#39;);     // c元素
    
    source.addEventListener(&#39;dragstart&#39;,function(ev){   // dragstart事件由a元素产生
        console.log(&#39;a元素开始被拖动&#39;);
    },false)

    process.addEventListener(&#39;dragenter&#39;,function(ev){  // dragenter事件由b元素产生
        console.log(&#39;a元素开始进入b元素&#39;);
    },false)
    process.addEventListener(&#39;dragleave&#39;,function(ev){  // dragleave事件由b元素产生
        console.log(&#39;a元素离开b元素&#39;);
    },false)

    target.addEventListener(&#39;drop&#39;,function(ev){        // drop事件由c元素产生
        console.log(&#39;a元素拖放到c元素了&#39;);
        ev.preventDefault();
    },false)
    document.ondragover = function(e){e.preventDefault();}
</script>

dataTransfer object

は、すべてのドラッグ アンド ドロップ イベントでデータ転送オブジェクト dataTransfer を提供します。これは、ソース オブジェクトとターゲット オブジェクトの間でデータを転送するために使用されます。次に、このオブジェクトのメソッドとプロパティを理解して、データがどのように転送されるかを理解しましょう。

setData()

このメソッドは、データを dataTransfer オブジェクトに保存します。 2 つのパラメーターを受け取ります。最初のパラメーターは、保存されるデータのタイプを表す string を表します:

1. text/plain: text text。

2. text/html: HTML テキスト。

3. text/xml: XML テキスト。

4. text/uri-list: URL リスト。各 URL は 1 行です。

2 番目のパラメータは、保存されるデータです。例:

event.dataTransfer.setData('text/plain','Hello World');

getData()

このメソッドは、dataTransfer オブジェクトからデータを読み取ります。パラメータはsetDataで指定されたデータ型です。例:

event.dataTransfer.getData('text/plain');

clearData()

このメソッドは、dataTransfer オブジェクトに保存されているデータをクリアします。パラメータはオプションであり、データ型です。パラメータが空の場合、すべての種類のデータがクリアされます。例:

event.dataTransfer.clearData();

setDragImage()

このメソッドは、img 要素を使用してドラッグ アンド ドロップ アイコンを設定します。 3 つのパラメータを受け取ります。1 つ目はアイコン要素、2 つ目はマウス ポインタからのアイコン要素の X 軸変位、3 つ目はマウス ポインタからのアイコン要素の Y 軸変位です。例:

var source = document.getElementById('source'),
    icon = document.createElement('img');

icon.src = 'img.png';

source.addEventListener('dragstart',function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)
},false)

effectAllowed プロパティとdropEffect プロパティ

これら 2 つのプロパティを組み合わせて、ドラッグ アンド ドロップの視覚効果を設定します。

注目に値する: IE は dataTransfer オブジェクトをサポートしていません。はい、IEのバージョンに関わらずサポート対象外となります。

ドラッグ アンド ドロップによる並べ替えの実装

ドラッグ アンド ドロップ API の使用方法にはすでに慣れていますが、これもプロジェクトで一般的です。まずアイデアを整理しましょう:

1. リストでは、各要素をドラッグ アンド ドロップできます。次に、最初に各要素の draggable 属性を true に設定する必要があります。

2. 各要素のドラッグスタートイベントをリッスンし、それを区別するためにソースオブジェクトをスタイル設定します。

3. 各要素のdragenterイベントをリッスンし、ソースオブジェクトが現在の要素に入ったら、要素の前にソースオブジェクトを追加します。このようにして、次の要素がソース オブジェクトによって絞り出され、並べ替え効果が得られます。

4. しかし、ソース オブジェクトを最後にランク付けすることはできず、最後から 2 番目にのみランク付けできることがわかります。このとき、dragleave イベントをリッスンする必要があります。プロセス オブジェクトが最後の要素である場合、ソース オブジェクトはプロセス オブジェクトから離れ、最後にソース オブジェクトが追加されます。

メインコードは次のとおりです:

var source = document.querySelectorAll('.list'),
    dragElement = null;

for(var i = 0; i < source.length; i++){
    source[i].addEventListener(&#39;dragstart&#39;,function(ev){
        dragElement = this;
    },false);

    source[i].addEventListener(&#39;dragenter&#39;, function(ev){
        if(dragElement != this){
            this.parentNode.insertBefore(dragElement,this);
        }
    }, false)

    source[i].addEventListener(&#39;dragleave&#39;, function(ev){
        if(dragElement != this){
            if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
                this.parentNode.appendChild(dragElement);
            }
        }
    }, false)
};

document.ondragover = function(e){e.preventDefault();}
document.ondrop = function(e){e.preventDefault();}

完全なコードアドレス:ドラッグデモ

互換性があります

主要是在IE中的兼容不太好，不过至少在IE10中能兼容上面的拖动排序。

而且在我简单的试验中发现，就是在 IE 中元素不设置 height 的时候，不会触发 dragleave 事件。

更重要的一点是在 ios 和安卓上，完全不兼容。不过还好，有一个插件能让它在移动端完美兼容。  

插件地址：ios-html5-drag-drop-shim    

只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。

<script>
var iosDragDropShim = { enableEnterLeave: true }
</script>
<script src="vendor/ios-drag-drop.js"></script>

以上がHTML5 ドラッグ アンド ドロップ API 実装のドラッグ アンド ドロップ並べ替えサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。