ドラッグ可能な div 実装コード_JavaScript スキル

ドラッグ可能な p は、特にブラウザが js コードに対して十分に効率的ではない場合に達成するのが比較的困難です。ただし、Firefox の js サポートが増加していると聞きました。おそらく、js が重要な役割を果たしているのでしょう。デスクトップでの Web ブラウジングのトレンドに。

p の任意のドラッグを実現するには、プロセス全体を分析した方がよいでしょう。
マウスが p をクリックすると、イベントがトリガーされ、マウスの位置に応じて p の位置属性 (左、上) が変化し、マウスを放したときの位置が p の位置属性に使用されます。 。
マウスのクリック時にイベントをトリガーするのは簡単です。onmouseclick を p タグに追加します。ここで解決しなければならない問題は、マウスの位置に応じて p の位置を変更する方法です。
これは非常に単純な推論プロセスかもしれませんが、明確にしておきましょう。 p の左上と p の左上隅の座標です。p にマウスを移動してクリックすると、このときマウスの座標と p の座標は一致しません。 p の座標をマウスの座標と同じにするだけでは、効果はそれほど完璧には見えません。そのため、まずマウスの座標と p 座標の差を取得し、次にマウスがその座標に移動したときに、この差をマウス座標から減算して p 座標を取得します (よく理解していない場合は、まず Web ページの基本を学習してください)。
次は簡単です。マウスが移動すると、p の座標が継続的に計算され、マウスが放されると、このイベントが削除されます。
js 関数全体は次のとおりです。
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left); events.clientY -parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true); Mouseup", upHandler,true);
//document.addEventListener("mouseout",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent ("onmousemove ",moveHandler);
document.attachEvent("onmouseup",upHandler);
//document.attachEvent("onmouseout",upHandler);
if(event.stopPropagation) ) イベント。
{
if (!e) e=window.event; //IE イベント オブジェクトの場合は window.event を使用します。
//グローバル属性を使用し、それ以外の場合は DOM の二次標準 Event オブジェクトを使用します。
elementToDrag.style.left=(e.clientX-deltaX) ”px”;
elementToDrag.style.top=(e.clientY-deltaY) ”px”;
if(e.stopPropagation) .stopPropagation();
else e.cancelBubble=true;
}
関数 upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener ("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{
document.detachEvent("onmouseup",upHandler); 🎜>document.detachEvent("onmousemove",moveHandler);}
}
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble=true;
}

このpドラッグを実装したjs関数について、実際に先輩がネット上で公開していたものを抜粋し、注釈を付けておきます。
function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top) ;
//ここでの deltaX/Y は、実際にはマウスと p の間の座標の差です。
if(document.addEventListener)
//ここでこのような判定を加えているのは、IE6 と Firefox では JavaScript イベント処理の方式が異なるためです (IE7 以降のバージョンは W3C 標準に準拠し始めています)。
//document.addEventlistener が true の場合、W3C DOM 標準をサポートするブラウザは Firefox などであり、IE6 ではイベントの登録に AttachEvent が使用されますが、Firefox などのブラウザでは addEventListener が使用されます。 addEventListener 関数の true パラメータは、イベントをキャプチャできることを示します。
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
//document.addEventListener("mouseout",upHandler); , true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
//document.attachEvent("onmouseout",upHandler);
if(event.stopPropagation)event.stopPropagation();
elseevent.cancelBubble=true;//The judgment here still takes into account different browsers. stopPropagation is a method used in the W3C DOM standard to cancel the propagation of events. We used the document.addEventListener method. The browser will propagate from the document object down the DOM node to the target node. The registered event handler will run, and then the event will be returned to the parent node. If the parent node also has a corresponding event handler, then the event will also be processed. In order to avoid this situation, we can use stopPropagation to prevent the propagation of the event. The function of this method is to make other elements invisible to this event. Under IE6, there is no process for elements to capture events, but there is a term called bubble process. The method used in IE6 is cancelBubble, which is used to cancel bubbles, indicating that the event has been processed and other elements no longer need to be seen.
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//The preventDefault here is used to notify the browser not to perform the default action associated with the event, and returnValue is used to Cancel the default action of the source element where the event occurs. You should be able to see that this plays the same role in different browsers.
//The following are the key functions used in dragging p.
function moveHandler(e)
{
if (!e) e=window.event; //If it is an IE event object, then use window.event
//Global attributes, otherwise Just use the DOM second-level standard Event object.
//In IE, event is an attribute of window, which is a global variable, but in W3C DOM, event is an attribute of the document object where the event occurs. In this program, it doesn't matter what the event is. The key is that we need to obtain the coordinate value of the mouse. In IE, when the e parameter is passed in, IE cannot recognize it, so we assign e to window.event.
elementToDrag.style.left=(e.clientX-deltaX) ”px”;
elementToDrag.style.top=(e.clientY-deltaY) ”px”;
//Here is the change now The left and top attributes of p are used.
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
//This function is used to remove the listener. It is relatively simple. I won’t go into details.
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}