ドラッグはとてもクールなことです。オブジェクトをクリックし、マウスを押し続け、マウスを別の領域に移動し、マウスボタンを解放してオブジェクトをここに配置します。
これが簡単なケースです：
HTMLパート：ドラッグ要素を絶対に定義する必要があることに注意してください。
コードコピーは次のとおりです
<スクリプトsrc = "dome.js"> </script>
JSパート（dome.js）：
var eventutil = {//イベントとターゲットGetEvent：function（event）{return event？イベント：window.event; }、getTarget：function（event）{return event.target || event.srcelement; }、//聞き取りイベントAddEvent：function（element、type、handler）{if（element.addeventlistener）{element.addeventListener（inty、handler、false）; } else if（element.attachevent）{element.attachevent（ "on" + type、handler）; }}、//リスニングイベントDelevent：function（element、type、handler）{if（element.removeeventlistener）{element.removeeventlistener（type、handler、false）; } else if（element.detachevent）{element.detachevent（ "on" + type、handler）; }}} var dragdrop = function（）{//フラグは、dom要素がドラッグされているかどうかを決定するvarドラッグ= null; // DOM要素の左上隅とマウスポインターの左上隅の差はdiffx = 0です。 diffy = 0; function handleevent（event）{event = eventutil.getEvent（event）; varターゲット= eventutil.getTarget（event）; switch（event.type）{case "mousedown"：// dom要素のクラスにdraggable属性が含まれているかどうかを判断diffx = event.clientx -target.offsetLeft; diffy = event.clienty -target.offsettop; } 壊す;ケース "Mousemove"：if（dragging！= null）{target.style.left = event.clientx -diffx + "px"; Target.style.top = event.clienty- diffy + "px"; } 壊す;ケース「MouseUp」：ドラッグ= null;壊す; }} return {enable：function（）{eventutil.addevent（document、 "mousedown"、handerevent）; eventutil.addevent（document、 "mousemove"、handerevent）; eventutil.addevent（document、 "mouseup"、handerevent）; }、disable：function（）{eventutil.delevent（document、 "mousedown"、handerevent）; eventutil.delevent（document、 "mousemove"、handerevent）; eventutil.delevent（document、 "mouseup"、handerevent）; }}}（）; dragdrop.enable（）;ここで説明する必要があるのは、要素の左上隅とマウスポインターの違いを表すDiffxとDiffyです。
diffx = xマウスの座標 - 要素オブジェクトのオフセットレフト
マウスのdiffy = y座標 - 要素オブジェクトのオフセット
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。