ホームページ > 記事 > ウェブフロントエンド > H5のドラッグ＆ドロップ機能を詳しく解説
H5のドラッグ＆ドロップ機能を詳しく解説
- php中世界最好的语言オリジナル
- 2018-03-27 09:59:462891ブラウズ
今回は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 | |||||||||||
|
メソッド
ブラウザのサポート 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 = 'move';
e.dataTransfer.setData('text/plain', 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 = '#eeeeff';
return true;
};
//拖拽元素在目标元素上离开
bin.ondragleave = function(e) {
this.style.backgroundColor = '#fff';
return true;
};
//拖拽的元素在目标元素上同时鼠标放开
bin.ondrop = function(e) {
if (drag) {
drag.parentNode.removeChild(drag);
this.appendChild(drag);
}
this.style.backgroundColor = '#fff';
return false;
};
}
document.body.ondrop = function(e) {
e.preventDefault();
e.stopPropagation();
}
</script>
</body>
</html>
この記事のケースを読んだ後、あなたはそれをマスターしたと思います記事「方法」、さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: |
以上がH5のドラッグ＆ドロップ機能を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。