ネイティブ js のドラッグ アンド ドロップ (レッスン 1 と互換性はありません) ドラッグ アンド ドロップのアイデア_JavaScript スキル

コードをコピー コードは次のとおりです:

/*
ドラッグ アンド ドロップ プロセス:
1. 章 ドラッグする必要がある要素を一度にクリックします
2. クリック中の要素が選択され、移動します
3. マウスが上に跳ね返ると、アクションが停止します
4.要素 oDIV をクリックすると、oDIV 領域が使用可能になります。一方、move と up はドキュメント全体に共通のグローバル領域です。つまり、ドキュメント
*/
oDIV = document.getElementById("gaga") );
oDIV.onmousedown = を使用する必要があります function( e ){ // マウスがクリックされたとき
var diffX = e.clientX - oDIV.offsetLeft; // クリックされた位置は、ブラウザ (clientX) からクリックされた要素からの距離を引いた値 左の位置 (oDIV.offetLeft) は、トリガー内のクリックされた要素の左端の位置から不確実であるため、この結果が必要です
var diffY = e.clientY - oDIV。 offsetTop; // クリックされた要素とブラウザとの距離 クリックされた要素の先頭からの位置 (oDIV.offsetTop) から先頭の位置 (clientY) が減算されます。したがって、この結果が必要です。
document.onmousemove = function( e ){ // マウスを押したままにしたとき
var e = e window.event;
oDIV.style.top = e .clientY - diffY "px";
oDIV.style.left = e.clientX - diffX "px";
document.onmouseup = function(){ // マウスが上に跳ね上がったとき🎜>document.onmousemove = null; // マウスが放されていないイベントをクリアします
document.onmouseup = null; // マウスアップイベントをクリアします
}
}; >