DOM

：

：

Document：dragstart イベント

　編集：2022.10.10 by T.A.

[Edge]。→、

文書上でユーザーが要素や選択されたテキストをドラッグし始めた時に発生します。

バブリング あり
キャンセル可能 はい
インターフェイス DragEvent
イベント ハンドラー プロパティ ondragstart
既定のアクション ドラッグ＆ドロップ操作を始める。
例
dragstart、dragend イベント

HTML： 

当文書でドラッグ操作…<BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function JobDS(eve){ //dragstart イベントの処理：
  D=eve; //＝[object]：[object DragEvent]。文書上のテキストを範囲指定した物をドラッグした。

詳細	//isTrusted＝[boolean]：true
	//dataTransfer＝[object]：[object DataTransfer]
	//screenX＝[number]：275
	//screenY＝[number]：345
	//clientX＝[number]：68
	//clientY＝[number]：270
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：1
	//relatedTarget＝[object]：null
	//pageX＝[number]：68
	//pageY＝[number]：1324
	//x＝[number]：68
	//y＝[number]：270
	//offsetX＝[number]：46
	//offsetY＝[number]：13
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：[object Text]
	//layerX＝[number]：68
	//layerY＝[number]：1324
	//getModifierState＝[function]：function getModifierState() { [native code] }
	//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
	//view＝[object]：[object Window]
	//detail＝[number]：0
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：1
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：dragstart
	//target＝[object]：[object Text]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…


  IdLog.innerHTML=IdLog.innerHTML +"●";
}
function JobDE(eve){ //dragend イベントの処理：
  DA=eve; //＝[object]：[object DragEvent]。ドラッグ物を放した。

詳細	//isTrusted＝[boolean]：true
	//dataTransfer＝[object]：[object DataTransfer]
	//screenX＝[number]：525
	//screenY＝[number]：249
	//clientX＝[number]：318
	//clientY＝[number]：174
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：318
	//pageY＝[number]：1228
	//x＝[number]：318
	//y＝[number]：174
	//offsetX＝[number]：296
	//offsetY＝[number]：-83
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：[object Text]
	//layerX＝[number]：318
	//layerY＝[number]：1228
	//getModifierState＝[function]：function getModifierState() { [native code] }
	//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
	//view＝[object]：[object Window]
	//detail＝[number]：0
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：1
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：dragend
	//target＝[object]：[object Text]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true


  IdLog.innerHTML=IdLog.innerHTML +"○";
}
document.ondragstart=JobDS;
document.ondragend=JobDE;

JavaScript： 中止してみる。 

function JobDS(eve){ //dragstart イベントの処理：
  D=eve;
  eve.preventDefault();
  IdLog.innerHTML=IdLog.innerHTML +"●";
}
function JobDE(eve){ //dragend イベントの処理：
  DA=eve;
  IdLog.innerHTML=IdLog.innerHTML +"○";
}
document.ondragstart=JobDS;
document.ondragend=JobDE;

→Event.preventDefault()。

テスト