HTML DOM DragEvent
HTML DOM DragEventは、選択したテキストがドラッグアンドドロップされるたびに実行されるイベントの一種です。このイベントはHTML5で導入されました。
プロパティ
以下は、HTML DOMDragEvent-
のプロパティです。| プロパティ | 説明 |
|---|---|
| dataTransfer | ユーザーがドラッグまたはドロップしているデータを返すため。 |
構文
以下は、DragEvent-
の構文です。Object.DragEventType= function_name;
ここで、function_nameは、実行中のイベントで実行する関数です。
イベント
以下は、DragEventオブジェクトに属するイベントタイプです-
| イベント | 説明 |
|---|---|
| ondrag | 要素がドラッグされているときに発生します。 |
| ondragend | 要素がユーザーによるドラッグを終了したときに発生します。 |
| ondragenter | 要素がドラッグされた後にドロップターゲットに入るときに発生します。 |
| ondragleave | 要素がドラッグ中にドロップターゲットを離れたときに発生します。 |
| ondragover | ドラッグ中に要素がドロップターゲット上にある場合に発生します。 |
| ondragstart | ユーザーが要素のドラッグを開始したときに発生します。 |
| オンドロップ | 要素がドラッグされた後、ドロップターゲットにドロップされたときに発生します。 |
例
<!DOCTYPE html>
<html>
<head>
<style>
.DivDrop {
float: left;
width: 100px;
height: 40px;
margin:10px;
border: 1px solid blue;
background-color:lightgreen;
font-weight:bold;
}
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", "spanDrag");
document.getElementById("spanDrag").innerText="drag Text";
document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};
document.ondrag = function(event) {
document.getElementById("Sample").innerHTML = "Span element is being dragged";
};
document.ondragover = function(event) {
event.preventDefault();
};
document.ondrop = function(event) {
event.preventDefault();
if(event.target.className=="DivDrop"){
var txt = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(txt));
document.getElementById(txt).innerText="Dragged Text";
document.getElementById(txt).style.backgroundColor="lightyellow";
document.getElementById("Sample").innerHTML = "The span element is dropped";
}
};
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
「これをドラッグ！」をドラッグするとテキスト。「テキストのドラッグ」に変わります。
2番目のdivに「ドラッグテキスト」をドロップすると-
上記の例では-
最初に、同じクラス名「DivDrop」を持つ2つのdiv要素を作成しました。これにより、両方に共通のcssスタイルを使用できるようになります。最初の
.DivDrop {
float: left;
width: 100px;
height: 40px;
margin:10px;
border: 1px solid blue;
background-color:lightgreen;
font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
次に、イベントが発生したときに実行されるいくつかの関数を作成しました。最初の関数は、ondragstartイベントに関連付けられています。このイベントは、ユーザーがテキストのドラッグを開始したときに発生します。この関数には、ドラッグデータ型とデータを取得するsetData（）メソッドが含まれています。ここで、タイプは「テキスト」であり、データは要素IDです。
タグに関連付けられているIDを見つけるには、event.target.idを使用する必要があります。ここではわかりやすくするために名前を使用しました-
ondragイベントに関連付けられた関数は、IDを取得した後、innerHTMLプロパティを使用して、
要素のテキストを「Span要素がドラッグされています」に設定します。 ondragイベントは、テキストがユーザーによってドラッグされているときに発生します-
ondragoverイベントに関連付けられた関数は、event.preventDefault（）メソッドを使用して、ドラッグオーバーで発生するデフォルトのアクションを停止します。ドラッグオーバーイベントは、ドラッグされている要素が目的のターゲットより上にあるときに定期的に発生します-
ondropイベントに関連付けられた関数は、デフォルトのアクションが発生しないようにします。次に、目的のターゲットが2番目の
次に、getData（）メソッドを使用して、タイプ「text」のドラッグデータを取得します。この場合、その要素はになり、次に要素を2番目のdivの子として追加し、その内部テキスト、背景色を変更して変更を反映します-
タッチスクリーンがタッチされるとHTMLDOMタッチスタートイベントがトリガーされます。 注 −このイベントはタッチデバイスのみを対象としています。 以下は構文です- HTMLでタッチスタートイベントをトリガーする- ontouchstart = "eventFunction()" JavaScriptでタッチスタートイベントをトリガーする- eventObject.ontouchstart = eventFunction 注 −モバイルまたはタッチアクセスのあるシステムでアクセスされるオンラインHTMLエディターでタッチイベントの例を実行しました。これは、画面を2秒間
HTML DOM touchmoveイベントは、タッチがタッチスクリーン上を移動したときにトリガーされます。 注 −このイベントはタッチデバイスのみを対象としています。 以下は構文です- HTMLでtouchmoveイベントをトリガーする- ontouchmove = "eventFunction()" JavaScriptでtouchmoveイベントをトリガーする- eventObject.ontouchmove = eventFunction 注 −モバイルまたはタッチアクセスのあるシステムでアクセスされるオンラインHTMLエディターでタッチイベントの例を実行しま document.ondragstart = function(event) {
event.dataTransfer.setData("Text", "spanDrag");
document.getElementById("spanDrag").innerText="drag Text";
document.getElementById("spanDrag").style.backgroundColor="lightgreen";
}; Document.ondrag = function(event) {
document.getElementById("Sample").innerHTML = "Span element is being dragged";
}; document.ondragover = function(event) {
event.preventDefault();
}; document.ondrop = function(event) {
event.preventDefault();
if(event.target.className=="DivDrop"){
var txt = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(txt));
document.getElementById(txt).innerText="Dragged Text";
document.getElementById(txt).style.backgroundColor="lightyellow";
document.getElementById("Sample").innerHTML = "The span element is dropped";
}