ホームページ > 記事 > ウェブフロントエンド > HTML5のドラッグ＆ドロップ（Drag and Drop）の詳しい説明と例
HTML5のドラッグ＆ドロップ（Drag and Drop）の詳しい説明と例
- 高洛峰オリジナル
- 2017-02-09 15:09:551793ブラウズ
はじめに
ドラッグ アンド ドロップは一般的な機能で、オブジェクトを取得し、後で別の場所にドラッグします。
HTML5 ではドラッグ アンド ドロップが標準の一部であり、あらゆる要素をドラッグ アンド ドロップできます。
最初に小さな例をクリックします: ユーザーが
要素のドラッグを開始したときに JavaScript を実行します
<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
ヒント: リンクと画像はデフォルトでドラッグ可能であり、draggable 属性は必要ありません。
定義と使用法
ドラッグ アンド ドロップ プロセス中に次のイベントがトリガーされます:
ドラッグ ターゲット (ソース要素) でイベントをトリガー:
ondragstart - ユーザーが要素のドラッグを開始するとトリガーされます
ondrag -要素がドラッグされています 移動時にトリガーされます
ondragend - ユーザーが要素のドラッグを完了した後にトリガーされます
ターゲットが放されたときにトリガーされるイベント:
ondragenter - このイベントは、マウスでドラッグされたオブジェクトがコンテナー範囲に入ったときにトリガーされます
ondragover - オブジェクトが次のとき このイベントは、ドラッグされたオブジェクトが別のオブジェクトのコンテナ範囲内にドラッグされるとトリガーされます
ondragleave - このイベントは、マウスでドラッグされているオブジェクトがそのコンテナ範囲を離れるとトリガーされます
ondrop - ドラッグ中プロセスを実行し、マウスを放します このイベントは、キーが押されるとトリガーされます
ブラウザのサポート
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートします。
注: Safari 5.1.2 はドラッグをサポートしていません。要素をドラッグすると、ondragover イベントが 350 ミリ秒ごとにトリガーされます。
例
まずコードを貼り付けてから、1つずつ説明します:
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
<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>
</body>
</html>
ドラッグ前のページ効果は次のとおりです:
上記のコードの意味を個別に分析してみましょう。
要素をドラッグ可能に設定します
まず、要素をドラッグ可能にするために、draggable 属性を true に設定します:
<img draggable="true">
何をドラッグするか - ondragstart と setData()
次に、要素がドラッグされると、何が起こったのだろう。
上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。
dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。
配置場所 - ondragover
ondragover イベントは、ドラッグされたデータを配置する場所を指定します。
デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。
これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます:
event.preventDefault()
配置用 - ondrop
ドラッグされたデータがドロップされると、drop イベントが発生します。
上記の例では、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」)
ドラッグされた要素を配置要素(ターゲット要素)に追加します
結果は図のようになります:
dataTransferオブジェクト
ドラッグ中 操作中に、dataTransfer オブジェクトを使用してデータを転送し、ドラッグ操作が終了したときにデータに対して他の操作を実行できるようにします。
オブジェクトのプロパティ:
dropEffect: ドラッグ アンド ドロップ ターゲット上で実行できるドラッグ アンド ドロップ動作を設定または返します。ここで設定したドラッグ アンド ドロップ動作が、effectAllowed プロパティによって設定された複数のドラッグ アンド ドロップ動作の中に含まれなくなった場合、ドラッグ アンド ドロップ操作は失敗します。属性値は、「null」、「copy」、「link」、「move」の 4 つの値のいずれか 1 つだけが許可されます。
effectAllowed: ドラッグされた要素に許可されるドラッグ動作を設定または返します。プロパティ値は、「none」、「copy」、「copyLink」、「copyMove」、「link」、「linkMove」、「move」、「all」、および「uninitialized」に設定できます。
items: このプロパティは、ドラッグ データを表す DataTransferItems オブジェクトを返します。
types: このプロパティは、dataTransfer に格納されているすべてのタイプのデータを含む DOMStringList オブジェクトを返します。
オブジェクトメソッド:
setData(format,data): 指定された形式のデータを dataTransfer オブジェクトに割り当てます。パラメータ format は、割り当てられるデータの形式を定義します。
getData(format): from dataTransfer オブジェクトから指定された形式のデータを取得します。format はデータ形式を表し、data はデータを表します。
clearData([format]): dataTransfer オブジェクトから指定された形式のデータを削除します。パラメータが指定されていない場合、オブジェクト内のすべてのデータが削除されます。
addElement(element): カスタムアイコンを追加します
setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。
Identify what is draggable
function dragstart_handler(ev) {
console.log("dragStart");
// Add the target element's id to the data transfer object
ev.dataTransfer.setData("text/plain", ev.target.id);
}
<body>
<p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>
Define the drag's data
function dragstart_handler(ev) {
// Add the drag data
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}
Define the drag image
function dragstart_handler(ev) {
// Create an image and then use it for the drag image.
// NOTE: change "example.gif" to an existing image or the image
// will not be created and the default drag image will be used.
var img = new Image();
img.src = 'example.gif';
ev.dataTransfer.setDragImage(img, 10, 10);
}
Define the drag effect
function dragstart_handler(ev) { // Set the drag effect to copy
ev.dataTransfer.dropEffect = "copy";
}
Define a drop zone
function dragover_handler(ev) {
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<body>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
火狐浏览器拖拽问题
但是进行到这儿在火狐浏览器中发现一个问题：
html5的拖拽，用了preventDefault防止弹出新页面，但在火狐下不管用？
解决办法：
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
更多HTML5 拖放（Drag 和 Drop）详解与实例相关文章请关注PHP中文网！