ホームページ > 記事 > ウェブフロントエンド > HTML5 DragEventインターフェースの説明例
HTML5 DragEventインターフェースの説明例
- 零下一度オリジナル
- 2017-05-26 15:41:481970ブラウズ
DragEvent は、ドラッグ アンド ドロップ間の対話を表す DOM イベント インターフェイスです。ユーザーは、ポインティング デバイス (マウスなど) をターゲットの表面上に置くことでドラッグを開始し、ポインタを新しい位置 (別の DOM 要素など) にドラッグします。アプリケーションは、ドラッグ アンド ドロップ操作を自動的に解決します。 DragEvent インターフェイスは、mouseEvent および Event からプロパティを継承します。
イベント タイプ
DragEvent は単一のイベントではなく、複数のイベントが含まれています。これらのイベントは、drag、dragstart、dragenter、dragend、dragover、dragexit、dragleave、drop です。
drag: このイベントは、要素のドラッグ プロセス中に 100 ミリ秒ごとに繰り返しトリガーされます。このイベントのターゲット要素は、ドラッグされた要素です。このイベントは、デフォルトの動作をバブルアップしてキャンセルすることができます。
dragstart: このイベントは、ユーザーがドラッグを開始するとトリガーされます。このイベントの対象要素は、ドラッグされている要素です。これらのイベントのうち、dragstart イベントが最初にトリガーされます。このイベントが発生し、デフォルトの動作がキャンセルされる可能性があります。
dragenter: このイベントは、ドラッグされた要素が正当なドロップ可能なターゲットに入ったときにトリガーされます。このイベントのターゲット要素はドロップ可能なターゲットです。このイベントが発生し、デフォルトの動作がキャンセルされる可能性があります。
dragover: このイベントは、ドラッグされた要素がドロップ ターゲット範囲内で移動すると、100 ミリ秒ごとに繰り返しトリガーされます。このイベントのターゲット要素はドロップ可能なターゲットです。このイベントが発生し、デフォルトの動作がキャンセルされる可能性があります。
dragend: このイベントは、ドラッグが終了するとトリガーされます。このイベントのターゲット要素は、ドラッグされた要素です。ドラジェンド火災はこれらのイベントの中で最後に発生します。このイベントは発生する可能性があり、デフォルトの動作をキャンセルすることはできません。
dragleave: このイベントは、ドラッグされた要素が正当なドロップ ターゲットから離れるとトリガーされます。このイベントのターゲット要素はドロップ可能なターゲットです。このイベントは発生する可能性があり、デフォルトの動作をキャンセルすることはできません。
dragexit: このイベントは、ドロップ可能な要素がドラッグ操作の最も近いドロップ ターゲットでなくなったときにトリガーされます。このイベントのターゲット要素はドロップ可能な要素です。このイベントは発生する可能性があり、デフォルトの動作はキャンセルされません。
drop: このイベントは、ドラッグされた要素のポインター デバイスがドロップ可能なターゲット上で解放されるとトリガーされます。このイベントのターゲット要素はドロップ可能なターゲットです。ドロップ イベントは、dragend イベントが発生する前に発生します。このイベントが発生し、デフォルトの動作がキャンセルされる可能性があります。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<script type="text/javascript">
document.addEventListener('drag',function(event){
event.target.style.backgroundColor = 'black';
},false);
document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red';
},false);
document.addEventListener('dragend',function(event){
event.target.style.backgroundColor = 'yellow';
},false);
document.addEventListener('dragover',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'blue';
},false);
document.addEventListener('dragenter',function(event){
event.target.style.backgroundColor = 'green';
},false);
document.addEventListener('dragleave',function(event){
event.target.style.backgroundColor = 'pink';
},false);
document.addEventListener('dragexit',function(event){
event.target.style.backgroundColor = 'red'
},false);
document.addEventListener('drop',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'white';
console.log(2);
},false)
</script>
</body>
</html>これらのイベントのイベント オブジェクトには、マウス イベントのイベント オブジェクトのメソッドとプロパティが含まれています。さらに、要素をドラッグ可能にする dataTransfer 属性
があります
HTML では、デフォルトでドラッグ可能な要素は画像、リンク、選択されたテキストのみです。他の要素をドラッグ可能にするには、次の 3 つのことを行う必要があります:
1. 要素にドラッグ可能属性を設定し、この属性の値を true に設定します
2. この要素にドラッグ開始イベント リスナーを追加します
3. ドラッグスタートイベントリスナーのevent.DataTransfer.setData(type, value)を通じてドラッグデータを設定します。
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
This text <strong>may</strong> be dragged.
</p>draggable 属性が無効になっているか false に設定されている場合、この要素はドラッグできません。ドラッグ可能属性は任意のプロパティに設定できます。要素がドラッグ可能に設定されている場合、要素上でマウスをクリックまたはドラッグしても、要素内のテキストやその他の要素は選択されません。ユーザーがドラッグを開始すると、dragstart イベントがトリガーされます。dragstart イベントでは、setData() を使用してドラッグ データを指定し、setDragImage() を使用して画像フィードバックを指定し、effectAllowed 属性と DropEffect を設定してドラッグ効果を指定できます。属性。ドラッグ データを指定する必要がありますが、ドラッグ エフェクトには画像フィードバックは必要ありません
ドラッグ データ
ドラッグ データには、データ型とデータ値の 2 つの部分の情報が含まれています。データ型は 文字列 で、データの値も です。文字列形式で。 ドラッグ アンド ドロップ データの種類には、text/plain、text/html、image/jpeg、text/uri-list などが含まれます。種類をカスタマイズすることもできます。
setData() メソッドを複数回呼び出して、複数のドラッグ アンド ドロップ データを設定できます。次のように:
var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');application/x-bookmark はカスタム タイプです。
この方法で新しいタイプのデータを設定すると、新しいドラッグ データがドラッグ データ リストの最後に配置されます。既存のデータ タイプを設定すると、新しいデータが古いデータを上書きします。
指定された種類のドラッグ アンド ドロップ データは、getData() を通じて取得できます。
指定された種類のドラッグ アンド ドロップ データは、clearData() を通じてクリアできます。
画像フィードバック
画像フィードバックは、次のように設定する必要はありません。デフォルトはドラッグターゲットからです。半透明の画像が生成され、この画像はドラッグ中のマウスの動きに追従します。 setDragImage(image,xOffect,yOffect) メソッドを使用して画像フィードバックをカスタマイズできます。
setDragImage() は 3 つのパラメータを受け取ります。最初のパラメータは画像 reference を表し、2 番目と 3 番目のパラメータはマウス ポインタを基準とした画像の左上隅の位置を表します。単位はピクセルです
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<script type="text/javascript">
document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red';
event.dataTransfer.setDragImage(document.getElementById('img'),30,30);
},false);
</script>
</body>
</html>ドラッグ効果
effectAllowedとdropEffectを設定することでドラッグ効果を指定できます
事件对象的dataTransfer属性
dataTransfer属性是一个DataTransfer对象，在这个属性中保存了拖拽操作过程中的数据，它可能保存一个或者多个数据项。这个属性是只读的。
dataTransfer属性中的标准属性
1.dropEffect
得到当前drag and drop操作的类型，或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none，copy，move，link。这属性会影响拖拽过程中的鼠标的显示形式。
2.effectAllowed
这个属性用于指定运行的拖拽操作效果，可选的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默认情况这个值是all，如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。
3.files
包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作没有涉及文件，那么它是一个空列表。
4.items
是一个包含了所有拖拽数据的列表。它是一个DataTransferItemList对象。
5.types
它是一个字符串数组，这个数组中包含在dragstart事件处理程序中设置的拖拽事件的类型，如果拖拽操作不存在数据，那么他得到一个空数组。
DataTransfer属性的标准方法
1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数，如果这个参数是空或者没有指定，那么移除所以类型的数据，如果指定的类型不存在或者data transfer中不包含数据，那么这个方法不会产生什么影响。
2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据， 得到一个空的字符串。
3.setData(type，value):设置给定类型的拖拽数据。接受两个参数，第一个参数是类型，第二个参数是指定类型的值。 如果这个类型的值不存在，那么在类型列表的最后添加一个新的格式，如果已经存在的,那么在相同的位置 存在的数据被替换.
4.setDragImage(image，xoffset，yoffset):接受三个参数，第一个参数是图片的引用，第二个和第三个参数是移动的图片的 左上角相对鼠标的位置。
DataTransferList对象
通过dataTransfer.items得到的值就是DataTransferList对象。
DataTransferList对象的属性
1.length:得到拖拽数据的数量
DataTransferList对象的方法
1.add()：向拖拽数据列表中添加一个新的拖拽数据，添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中，这个方法只接受一个文件对象作为参数。当添加一个给定 类型的字符串到拖拽数据列表中，这个方法接受两个参数，第一个参数是数据，第二个参数是类型。
2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数，如果这个参数小于0或者大于拖拽数据列表的长度，拖拽数据列表不会发生改变。
3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。
4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数， 这个方法简写形式是数组索引。
DataTransferItem对象
dataTransfer.items中的每一项都是DataTransferItem对象。
DataTransferItem对象的属性
1.kind：得到拖拽数据的键，可能的值有file和string
2.type：得到拖拽数据的类型，是MINE type
DataTransferItem对象的方法
1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null
2.getAsString(function):调用回调函数，这个回调函数将拖拽数据项的字符串形式作为它的参数
拖拽文件
要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop，dragover和dragend事件处理程序。
当为一个元素添加drop事件的处理程序，及在dragover事件处理程序中取消浏览器的默认行为，那么这个元素就是放置区域。
另外，在drag和drop操作结束之后，应用程序应该移除拖拽数据（可能是一个或者多个文件），数据的清理通常在 dragend事件处理程序中。
<p id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)"> <strong><Drag one or more files to this Drop Zone ...</strong> </p>
例子一，访问文件名
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// If dropped items aren't files, reject them
var dt = ev.dataTransfer;
if (dt.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i=0; i < dt.items.length; i++) {
if (dt.items[i].kind == "file") {
var f = dt.items[i].getAsFile();
console.log("... file[" + i + "].name = " + f.name);
}
}
} else {
// Use DataTransfer interface to access the file(s)
for (var i=0; i < dt.files.length; i++) {
console.log("... file[" + i + "].name = " + dt.files[i].name);
}
}
}例子二，阻止浏览器默认行为
function dragover_handler(ev) {
console.log("dragOver");
// Prevent default select and drag behavior
ev.preventDefault();
}例子三，清除数据
function dragend_handler(ev) {
console.log("dragEnd");
// Remove all of the drag data
var dt = ev.dataTransfer;
if (dt.items) {
// Use DataTransferItemList interface to remove the drag data
for (var i = 0; i < dt.items.length; i++) {
dt.items.remove(i);
}
} else {
// Use DataTransfer interface to remove the drag data
ev.dataTransfer.clearData();
}
}【相关推荐】
1. 免费h5在线视频教程
2. 20 分で HTML5 を理解し、H5 の新機能を確認します
5. 6.以上がHTML5 DragEventインターフェースの説明例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。