ドラッグ＆ドロップ効果シリーズ3

前のセクションでは、ドラッグコードをより便利に使用し、複数の要素に適用します.同時に、たまに発生するドラッグ1つの要素、複数の要素が一緒に移動する問題を解決しました.しかし、急速にドラッグすると、遅延が発生したり、要素がいっそ移動を停止したりします.要素が移動を停止した原因を分析すると、マウスのスライドが速すぎると、自然にmousemoveイベントが何度も発生し、それに応じて、イベント処理関数も何度も呼び出され、自然に遅延をもたらす.遅延後、要素の移動速度がマウスの移動速度に追いつかず、マウスが要素を移動した状態になり、mouseoutイベントがトリガーされ、ドラッグされた要素が移動を停止する可能性があります.上記の考えを検証するために、要素にonmouseoutの応答関数を追加し、文字列を表示します.修正コードは次のとおりです.
Javascriptコード

  

function dragInit(node){  

    if(node.className == "drag"){   

        ……  

        node.onmouseout = out;  

        ……  

    }  

        ……  

}  

……  

function out(){  

alert(「マウスが外に出ると、もう移動できない!!」);  

}  

……  

  

<script type="text/javascript">
function dragInit(node){
	if(node.className == "drag"){ 
		……
		node.onmouseout = out;
		……
	}
		……
}
……
function out(){
	alert("      ，       ！！");
}
……
</script>

テストページにアクセスすると、ブラウザがmouseoutに非常に敏感であることがわかります.IEとFFの下でテストをしました.少し速く移動すると、マウスの移動イベントがトリガーされます.しかし、マウスがまだ要素を移動していない限り、要素は正常に移動することができます.しかし、マウスの「見た目」が要素から離れると、ドラッグ効果は本当に破壊されます.クイックドラッグ時にエレメントが移動を停止する問題を解決するには避けられない問題ですか?もちろんそうではありません.もしあなたが豆弁のユーザーであれば、「私の豆弁」欄に入ってドラッグ機能()をテストすることができます.いくら引っ張っても「急に止まる」ことはありません.私たちもこの問題を解決してみましょう.上で分析したように、要素が移動を停止したのは、マウスがドラッグされた要素を移動し、mousemoveイベントが応答できないためです.では、mousemoveイベントを遅延がある場合でも応答させることができます.documentにイベント処理関数を追加すればできます(他のソリューションも考えましたが、失敗しました).修正後のコードは次のとおりです.
Javascriptコード

  

//この変数を使用してドラッグする要素を識別する

var dragElement = null;  

……  

function dragInit(node){  

    if(node.className == "drag"){   

        node.onmousedown = down;  

//document応答mousemoveイベント

を使用

        document.onmousemove = move;  

        node.onmouseover = over;  

//この関数nodeを削除します.onmouseup = up;  

        node.style.position = "relative";  

        node.style.top = "0px";  

        node.style.left = "0px";  

        node.dragging = false;  

    }  

    var children = node.childNodes;  

    for(var i = 0;i < children.length; i++){  

        dragInit(children[i]);  

    }  

}  

function down(event)  

{     

……  

}  

function move(event){  

    event = event || window.event;  

//dragElementがnullであるか否か、すなわちドラッグ状態であるか否かを判断する

    if(dragElement){  

        var x,y;  

        y = event.clientY - mouseY + objY;  

        x = event.clientX - mouseX + objX;  

//dragElementの位置を変更

        dragElement.style.top = y + "px";  

        dragElement.style.left = x + "px";  

    }  

}  

function docUp(){  

//ドラッグを停止

    dragElement = null;  

}  

……  

  

<script type="text/javascript">
//            
var dragElement = null;
……
function dragInit(node){
	if(node.className == "drag"){ 
		node.onmousedown = down;
		//  document  mousemove  
		document.onmousemove = move;
		node.onmouseover = over;
		//     node.onmouseup = up;
		node.style.position = "relative";
		node.style.top = "0px";
		node.style.left = "0px";
		node.dragging = false;
	}
	var children = node.childNodes;
	for(var i = 0;i < children.length; i++){
		dragInit(children[i]);
	}
}
function down(event)
{	
……
}
function move(event){
	event = event || window.event;
	//  dragElement   null，        
	if(dragElement){
		var x,y;
		y = event.clientY - mouseY + objY;
		x = event.clientX - mouseX + objX;
		//  dragElement   
		dragElement.style.top = y + "px";
		dragElement.style.left = x + "px";
	}
}
function docUp(){
	//    
	dragElement = null;
}
……
</script>

修正後のテストページで実験してみるでは、速度がどんなに速くても、ドラッグ要素によって移動が停止する問題はありません.次に、主な修正点を説明します.グローバル変数dragElementを使用して、現在のドラッグ要素をマークします.   2. dragInit関数ではdocumentにmouseoverの応答関数を定義します.   3. mousemoveの応答関数のオブジェクトはthisではなくdragElementです.JavaScriptドラッグシリーズ1.JavaScriptドラッグ2.JavaScriptドラッグ2-マルチエレメント、分離JS 3.JavaScriptドラッグ3-クイックドラッグの問題を解決する4.JavaScriptドラッグ4-要素の位置を取得します.JavaScriptドラッグ5-パフォーマンスの最適化6.JavaScriptドラッグ6-エラーの修正