H5のドラッグ＆ドロップ機能を詳しく解説-H5 チュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-27 09:59:46

オリジナル

2927 人が閲覧しました

今回はH5のドラッグアンドドロップ機能について詳しく説明します。H5のドラッグアンドドロップ機能を実装する際の注意点は何ですか?実際の事例を見てみましょう。

HTML5のドラッグアンドドロップについて

ドラッグアンドドロップ（Drag and Drop）は、オブジェクトを掴んで別の場所にドラッグするという一般的な機能です。HTML5では、ドラッグアンドドロップは標準的な部分です。 HTML5 では、ユーザーはマウスを使用してドラッグ可能な要素を選択し、その要素をドロップ可能な要素にドラッグし、マウスボタンを放して要素をドロップできます。ドラッグ操作中に、ドラッグ可能な要素の半透明の表現がマウスポインタに従います。

要素をドラッグ可能にしたい場合は、そのdraggable属性をtrueに設定する必要があります(aタグのdraggableはデフォルトでtrueです)

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

いくつかのイベントがさまざまな段階でトリガーされますドラッグアンドドロップ操作イベント、ドラッグアンドドロップイベントの dataTransfer 属性には、ドラッグアンドドロップ操作に関連するデータが保存されます。

dragstart	は [ソース要素] に作用し、要素のドラッグが開始されたときにトリガーされます。dragstart イベントは、ユーザーによってドラッグされた要素にアタッチされる必要があります。このイベントでは、リスナーはドラッグされたデータや画像など、このドラッグに関連する情報を設定します。
drangeter	は [ソース要素] に作用し、ドラッグ中のマウスが要素に入るとトリガーされます。このイベントのリスナーは、この領域でマウスを放すことが許可されているかどうかを示す必要があります。リスナーが設定されていない場合、またはリスナーが動作しない場合、デフォルトでは解放は許可されません。
dragover	は [ターゲット要素] に作用し、ドラッグ中のマウスが要素を通過するとトリガーされます。
dragleave	は [ターゲット要素] に作用し、ドラッグ中のマウスが要素から離れるとトリガーされます。フィードバックを解放するハイライトまたは挿入マークとして削除できます。
drag	は [ソース要素] に作用し、要素がドラッグされるとイベントがトリガーされます。
drop	は [ターゲット要素] に作用し、ドラッグ操作が完了して解放されたときに、解放された要素でトリガーされます。
dragend	は[ソース要素]に作用し、操作が成功したかどうかに関係なく、ドラッグ操作の終了時にドラッグソースがトリガーされます。

(ドラッグ時にドラッグ関連のイベントのみがトリガーされ、mousemoveなどのマウスイベントはトリガーされません)

DataTransferオブジェクト

ドラッグアンドドロップ操作を処理するときは、次を使用する必要がありますDataTransfer オブジェクトにドラッグして、ドラッグしたデータを保存します。 DataTransfer は 1 つ以上のデータ、1 つ以上のデータ型を保存できます。
属性

ファイルと同等であり、データ送信で利用可能なすべてのファイルのリストが含まれます。ドラッグ操作にファイルのドラッグが含まれない場合、このプロパティは空のリストになります。保存されたデータのタイプのリストを、データが追加されるのと同じ順序で最初の項目として保存します。データが追加されていない場合は、空のリストが返されます。

dropEffect

dropEffect
[文字列] 実際の配置効果を指定します。可能な値:
copy: 新しい場所にコピーします
移動: 新しい場所に移動します
リンク: ソースの場所から新しい場所へのリンクを作成します
なし: 配置を禁止します (あらゆる操作によって禁止されます)

effectallowed

[文字列] ドラッグ時に許容される効果を指定します。可能な値:
copy: 新しい場所にコピーします。
移動: 新しい場所に移動します。
リンクの使用：ソースの場所から新しい場所へのリンクを確立します。 copyLink: コピーまたはリンクを許可します。
copyMove: コピーまたは移動を許可します。
linkMove: リンクまたは移動を許可します。
ALL: すべての操作を許可します。 none：全ての操作が禁止されます
未初期化: デフォルト値 (デフォルト値) は、すべての

types

メソッド

void addElement(Element要素)	ドラッグ元を設定します。通常、これを変更すると、ドラッグされるノードとドラッグエンドイベントのトリガーに影響します。デフォルトのターゲットはドラッグされたノードです
void clearData(String type)	指定されたタイプに関連付けられたデータを削除します。型パラメータはオプションです。タイプが空であるか指定されていない場合、そのタイプに関連付けられたすべてのデータが削除されます。指定されたタイプのデータが存在しない場合、またはデータ転送にデータが含まれていない場合、このメソッドは効果がありません。
String getData(String type)	指定されたタイプのデータを取得します。指定されたタイプのデータが存在しない場合、またはデータダンプにデータが含まれていない場合、メソッドは空の文字列を返します。
void setData(String type,String data)	指定された型のデータを設定します。データ型が存在しない場合は、の末尾に追加され、型リストの最後の項目が新しい形式になります。データ型がすでに存在する場合は、同じ場所にある既存のデータを置き換えます。つまり、同じ型のデータを置き換える場合、型リストの順序は変更されません。
void setDragImage(DOMElement image,long x,long y)	希望のドラッグ画像をカスタマイズします。ドラッグされたノードはデフォルトのイメージとして作成されるため、ほとんどの場合、これは必要ありません。画像ドラッグフィードバック画像要素として使用されます x 画像内の水平オフセット。画像内の y の垂直方向のオフセットです。

ブラウザのサポート

Internet Explorer 9+、Firefox、Opera 12、Chrome および Safari 5+

デモコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag & Drop</title>
<style type="text/css">
.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccccff;
    background-color: #ccccff;
    text-align: center;
    line-height: 100px;
}
.bin {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ccccff;
    overflow: hidden;
    float: left;
}
</style>
</head>
<body>
    <p style="display: table;">
        <p class="bin">
            <p class="box" draggable="true">可拖拽元素</p>
        </p>
        <p class="bin"> </p>
    </p>
    <script type="text/javascript">
        var bins = document.querySelectorAll('.bin');
        var boxs = document.querySelectorAll('.box');
        var drag = null;
        for (var i = 0; i < boxs.length; i++) {
            var box = boxs[i];
            box.onselectstart = function() {
                return false;
            };
            box.ondragstart = function(e) {
                e.dataTransfer.effectAllowed = &#39;move&#39;;
                e.dataTransfer.setData(&#39;text/plain&#39;, e.target.outerHTML);
                e.dataTransfer.setDragImage(e.target, 0, 0);
                drag = this;
                return true;
            };
            box.ondragend = function(e) {
                drag = null;
                return false
            };
        }
        for (var i = 0; i < bins.length; i++) {
            var bin = bins[i];
            //当拖曳元素进入目标元素
            bin.ondragover = function(e) {
                e.preentDefault();
                return true;
            };
            //拖拽元素在目标元素上移动
            bin.ondragenter = function(e) {
                this.style.backgroundColor = &#39;#eeeeff&#39;;
                return true;
            };
            //拖拽元素在目标元素上离开
            bin.ondragleave = function(e) {
                this.style.backgroundColor = &#39;#fff&#39;;
                return true;
            };
            //拖拽的元素在目标元素上同时鼠标放开
            bin.ondrop = function(e) {
                if (drag) {
                    drag.parentNode.removeChild(drag);
                    this.appendChild(drag);
                }
                this.style.backgroundColor = &#39;#fff&#39;;
                return false;
            };
        }
        document.body.ondrop = function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
    </script>
</body>
</html>

ログイン後にコピー

この記事のケースを読んだ後、あなたはそれをマスターしたと思います記事「方法」、さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

H5コンポジットポスターの詳細な説明

ドラッグイベントエディタはドラッグアンドドロップアップロード画像効果を実装します

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