ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript ドラッグアンドドロップ効果コード_JavaScript スキル

JavaScript ドラッグアンドドロップ効果コード_JavaScript スキル

WBOYオリジナル: 2016-05-16 18:57:401028ブラウズ

このプログラムのプロトタイプは、画像カットエフェクトを作成していたときに作成されました。当時、いくつかの同様のエフェクトを参考にし、muxrwc と BlueDestiny から多くのことを学びました。
整理するたびに気分が良くなりますが、学んだ知識と同じように、どこかに改善の余地があり、どこかに間違いがあり、特定のニーズを実現する必要があることが時々わかります。
単純なドラッグアンドドロップだけが必要な人々もいることを考慮して、簡単に学習できるように SimpleDrag の簡略化されたバージョンがあります。
効果プレビュー
追記: maxthon で広告フィルタリングをオンにすると、フィルタリングされてしまう可能性があります (回避する方法があるかどうかはわかりません)。
プログラムの説明
[プログラム原理]
ここでは SimpleDrag を例にして基本原理を説明します。
まず、初期化プログラムでドラッグアンドドロップオブジェクトが必要です。

コードをコピーしますコードは次のとおりです。

this.Drag = $(drag);

最初にドラッグアンドドロップオブジェクトに対するマウスの座標を記録する 2 つのパラメーターもあります。

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

this._x = this._y = 0 ;

削除イベントを追加するために使用される 2 つのイベントオブジェクト関数もあります:

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

this._fM = BindAsEventListener (this, this.Move); 
this._fS = Bind(this, this.Stop); 🎜> はそれぞれドラッグプログラムとドラッグ停止プログラムです。 
ドラッグ アンド ドロップ オブジェクトの位置は絶対位置である必要があります: 

コードをコピーコードは次のとおりです。 this.Drag.style.position = "absolute";

最後に、ドラッグ アンド ドロップの開始プログラムをドラッグ アンド ドロップのマウスダウン イベントにバインドします。 -drop object: 
addEventHandler(this.Drag, "mousedown ", BindAsEventListener(this, this.Start)); 

ドラッグアンドドロップオブジェクト上でマウスが押されると、Start プログラムがトリガーされます。ここでは、ドラッグアンドドロップオブジェクトに対するマウスの座標が記録されます:

コードをコピーコードは次のとおりです:this._x = oEvent.clientX - this.Drag.offsetLeft;

this._y = oEvent.clientY - this.Drag.offsetTop ;

そして、_fM ドラッグ プログラムと _fS stop ドラッグ プログラムをそれぞれドキュメントのマウスムーブ イベントとマウスアップ イベントにバインドします: 

コードをコピーコードは次のとおりです。addEventHandler(document, "mousemove", this._fM );

addEventHandler(document, "mouseup", this._fS) );

イベントがウィンドウドキュメント全体で有効であることを確認するには、イベントをドキュメントにバインドする必要があることに注意してください。イベントがドラッグアンドドロップオブジェクトにのみバインドされている場合、ドラッグが速すぎて接触できなくなる可能性があります。。
ドキュメント上でマウスを移動すると、移動プログラムがトリガーされます。ドラッグを実装するプログラムは次のとおりです。
ドラッグアンドドロップオブジェクトに設定する必要がある左と上の値は、現在のマウスの座標値とドラッグ開始時のマウスの相対座標値の差によって取得できます:
this .Drag.style.left = oEvent.clientX - this._x "px";
this.Drag.style.top = oEvent.clientY - this._y "px"
最後にマウスを放すと、ドラッグアンドドロップを終了するには、プログラムの停止がトリガーされます。
ここでの主な機能は、スタートプログラムでドキュメントに追加されたイベントを削除することです。
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this. _fS );
このような単純なドラッグアンドドロッププログラムが完成しました。その他の拡張機能と詳細について説明します。
【ドラッグアンドドロップロック】
ロックには、水平ロック(LockX)、垂直ロック(LockY)、完全ロック(Lock)の3種類があります。
これは比較的簡単です。移動でロックされているかどうかを判断し、完全にロックされている場合は直接戻るだけです。
if(!this.LockX){ this.Drag.style.left = ; }
if(!this.LockY){ this.Drag.style.top = ; }
[トリガーオブジェクト]
トリガーオブジェクトは、ドラッグアンドドロッププログラムをトリガーするために使用され、プログラムの Handle 属性を通じて設定されます。場合によっては、ドラッグアンドドロップオブジェクト全体をトリガーに使用する必要がない場合があります。この場合、トリガーオブジェクトが必要になります。
トリガーオブジェクトを使用した後も、ドラッグアンドドロップオブジェクトは移動されますが、トリガーオブジェクトはドラッグアンドドロップをトリガーするために使用されます (一般的な使用法は、トリガーオブジェクトをドラッグアンドドロップオブジェクトに入れることです)。
追記: トリガーオブジェクトのもう 1 つの使用法は、同じハンドルを設定することで、1 つのトリガーオブジェクトで複数のドラッグアンドドロップオブジェクトを同時にドラッグアンドドロップすることです。
【範囲制限】
範囲制限を設定するには、まず Limit を true に設定する必要があります。範囲制限には固定範囲制限とコンテナ範囲制限の 2 種類があり、主に Move プログラムで設定します。
原理は、比較した値が範囲を超えた場合、ドラッグ＆ドロップしたオブジェクトが設定範囲内に収まるように左と上に設定する値を修正するというものです。
[固定範囲制限]
コンテナの範囲制限とは、ドラッグ＆ドロップで上下左右の範囲を指定することです。
各属性の意味は次のとおりです。
上 (mxTop): 上端の限界;
下 (mxBottom): 上端のオフセット高さの限界;
右 (mxRight) ) :left offsetWidth 制限。
範囲の設定が間違っていると、上下または左右が同時に範囲を超える可能性があります。範囲パラメータを修正するための修復プログラムがプログラム内にあります。
修復プログラムはプログラムの初期化と開始プログラムで実行されます。修復プログラムの mxRight と mxBottom を修正します。
this.mxRight = Math.max(this.mxRight, this.mxLeft this.Drag.offsetWidth) ;
this.mxBottom = Math.max(this.mxBottom, this.mxTop this.Drag.offsetHeight);
ここで、mxLeft offsetWidth と mxTop offsetHeight はそれぞれ mxRight と mxBottom の最小範囲値です。
範囲パラメーターに従って移動パラメーターを修正します。
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
iTop = Math.max(Math) .min( iTop, mxBottom - this.Drag.offsetHeight), mxTop);
左上側には大きな値を、右下側には小さな値を取ります。
【コンテナスコープ制限】
コンテナスコープ制限とは、スコープを一つのcontainer_mxContainerに制限することです。
プログラムは相対位置を使用してコンテナの範囲制限を設定するため、ドラッグアンドドロップオブジェクトを _mxContainer に含める必要があることに注意してください (コンテナの外側にある場合は、絶対位置を使用する必要があり、より面倒になります) ) また、コンテナ空間はドラッグアンドドロップオブジェクトよりも大きいため、これについては説明する必要はありません。
原理は固定範囲制限と似ていますが、範囲パラメータがコンテナの属性に従って設定される点が異なります。
コンテナが設定されると、修復プログラムは自動的に位置を相対位置に設定します:
!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || .style.position = "relative");
ps: 最終スタイルを取得するために CurrentStyle が使用されます (詳細については、ここの最終スタイルのセクションを参照してください)。
プログラムの実行前にドラッグアンドドロップオブジェクトの左と上が設定されているが、コンテナが相対に設定されていない場合、相対が自動的に設定されるとシフトが発生するため、プログラムは修復を実行することに注意してください。この状況を防ぐには、初期化中にプログラムを実行します。値を正しく取得するには、相対値を設定する前に offsetLeft と offsetTop を取得する必要があるため、Start プログラムで _x と _y を設定する前に Repair を実行する必要があります。
相対的な配置により、コンテナスコープの場合、範囲パラメータの上下左右の値はそれぞれ 0、clientHeight、0、clientWidth になります。
clientWidth と clientHeight は、コンテナーの表示部分の幅と高さです (詳細については、ここを参照してください)。
为了容器范围能兼容固定范围的参数，程序中会获取容器范围和固定范围中范围更小的值：
Code
mxLeft = Math.max(mxLeft, 0);
mxTop = Math.max(mxTop, 0);
mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
因为设置相对定位的关系，容器_mxContainer设置过后一般不要取消或修改，否则很容易造成移位异常。
【鼠标捕获】
我在一个拖放实例中看到，即使鼠标移动到浏览器外面，拖放程序依然能够执行，仔细查看后发现是用了setCapture。
鼠标捕获(setCapture)是这个程序的重点，作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。
使用很简单：
this._Handle.setCapture();
setCapture捕获以下鼠标事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。
程序中主要是要捕获onmousemove和onmouseup事件。
msdn的介绍中还说到setCapture有一个bool参数，用来设置在容器内的鼠标事件是否都被容器捕获。
容器就是指调用setCapture的对象，大概意思就是：
参数为true时（默认）容器会捕获容器内所有对象的鼠标事件，即容器内的对象不会触发鼠标事件（跟容器外的对象一样）；
参数为false时容器不会捕获容器内对象的鼠标事件，即容器内的对象可以正常地触发事件和取消冒泡。
而对于容器外的鼠标事件无论参数是什么都会被捕获，可以用下面这个简单的例子测试一下（ie）：
Code

mouseover

点击div的背景会触发不了事件（点击边框或div里面的对象是可以触发的）。
到底什么时候会出现这个bug呢，再用下面的代码测试：
Code

测试代码中我把背景颜色（包括body）设成灰色，首先可以看出在蓝色div（测试对象）内只要触发点是在灰色上面，就能触发事件；相反，在其他不是背景的地方，即使是边框、图片，也不能触发事件。
就像是把灰色的背景的补到蓝色div上来，而且仅仅是背景能这样，多奇怪的设定啊。
这里要说明的是body比较特别，不管背景是不是透明，只要触发点是直接在body上就能触发事件。
我的结论是如果触发事件的对象背景是透明的，而事件的触发点不在对象内的元素上，也不是直接在body上，而且透明背景外没有非透明背景的话，那么事件触发就会失败。
这个结论写得不太好，因为我都不知改怎么表达这奇怪的设定，希望各位能明白。
ps：这里设置图片背景跟颜色背景效果是一样的。
那最好解决的方法就是给对象设一个非透明背景，但有时需求正好是要透明的，那怎么办呢？
首先想到的是加上背景色后设置完全透明，但这样连边框，容器内的对象等都完全透明了，不够好。
如果能保证触发点直接在body或非背景上也可以，如果这个也不能保证呢？
我想到的一个解决方法是在容器里面加一个层，覆盖整个容器，并设置背景色和完全透明：
Code
with(this._Handle.appendChild(document.createElement("div")).style){
width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";
}
到这里又不得不说ie6的一个渲染bug，用下面的代码测试（ie6）：
Code

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

var isIE = (document.all) ? true : false; 
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
}; 
var Class = { 
create: function() { 
return function() { this.initialize.apply(this, argument); } 
} 
} 
var Extend = function(destination, source) { 
for (source の var プロパティ) { 
destination[property] = source[property]; 
} 
} 
var Bind = function(object, fun) { 
return function() { 
return fun.apply(object, argument); 
} 
} 
var BindAsEventListener = function(object, fun) { 
return function(event) { 
return fun.call(object, (event || window.event)); 
} 
} 
var CurrentStyle = function(element){ 
return element.currentStyle || document.defaultView.getComputedStyle(要素, null); 
} 
function addEventHandler(oTarget, sEventType, fnHandler) { 
if (oTarget.addEventListener) { 
oTarget.addEventListener(sEventType, fnHandler, false); 
} else if (oTarget.attachEvent) { 
oTarget.attachEvent("on" sEventType, fnHandler); 
} else { 
oTarget["on" sEventType] = fnHandler; 
} 
}; 
function removeEventHandler(oTarget, sEventType, fnHandler) { 
if (oTarget.removeEventListener) { 
oTarget.removeEventListener(sEventType, fnHandler, false); 
} else if (oTarget.detachEvent) { 
oTarget.detachEvent("on" sEventType, fnHandler); 
} else { 
oTarget["on" sEventType] = null; 
} 
}; 
//拖放程序 
var Drag = Class.create(); 
Drag.prototype = { 
//拖放对象 
initialize: function(drag, options) { 
this.Drag = $(drag);//拖放对象 
this. _x = this._y = 0;//记录鼠标相对拖放出オブジェクトの位置 
this._marginLeft = this._marginTop = 0;//记录margin 
//イベント对オブジェクト(定置撤去イベント用) 
this._fM = BindAsEventListener(this, this.Move); 
this._fS = Bind(this, this.Stop); 
this.SetOptions(オプション); 
this.Limit = !!this.options.Limit; 
this.mxLeft = parseInt(this.options.mxLeft); 
this.mxRight = parseInt(this.options.mxRight); 
this.mxTop = parseInt(this.options.mxTop); 
this.mxBottom = parseInt(this.options.mxBottom); 
this.LockX = !!this.options.LockX; 
this.LockY = !!this.options.LockY; 
this.Lock = !!this.options.Lock; 
this.onStart = this.options.onStart; 
this.onMove = this.options.onMove; 
this.onStop = this.options.onStop; 
this._Handle = $(this.options.Handle) || this.ドラッグ; 
this._mxContainer = $(this.options.mxContainer) || null; 
this.Drag.style.position = "絶対"; 
//透明 
if(isIE && !!this.options.Transparent){ 
//充填拖放对象 
with(this._Handle.appendChild(document.createElement("div") ).style){ 
幅 = 高さ = "100%";背景色 = "#fff";フィルター = "アルファ(不透明度:0)"; 
} 
} 
//修正范围 
this.Repair(); 
addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start)); 
}, 
//設置默认プロパティ 
SetOptions: function(options) { 
this.options = {//默认值 
Handle: "",//設置触発行对象（不
Limit: false,//設置范围制限(true の場合は下面パラメータ有用、可数) 
mxLeft: 0,//左边制限 
mxRight: 9999, //右边制限 
mxTop: 0,//上边制限 
mxBottom: 9999,//下边制限 
mxContainer: "",//指定制限在容器内 
LockX: false,//锁定水平方向拖放かどうか 
LockY: false,//锁定垂直方向かどうか 
Lock: false,//锁定かどうか 
Transparent: false,//透明かどうか 
onStart: function( ){},//移動開始時間の実行
onMove: function(){},//移動時間の開始
onStop: function(){}//移動時間の終了
}; 
Extend(this.options, options || {}); 
}, 
//準備备拖アニメーション 
Start: function(oEvent) { 
if(this.Lock){ return; 
this.Repair(); 
//记录ネズミ标相对拖放オブジェクトの位置 
this._x = oEvent.clientX - this.Drag.offsetLeft; 
this._y = oEvent.clientY - this.Drag.offsetTop; 
//记录マージン 
this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0; 
this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0; 
//mousemove時移動mouseup時停止
addEventHandler(document, "mousemove", this._fM); 
addEventHandler(document, "mouseup", this._fS); 
if(isIE){ 
//焦点丢失 
addEventHandler(this._Handle, "losecapture", this._fS); 
//設置ネズミ标捕获 
this._Handle.setCapture(); 
}else{ 
//焦点丢失 
addEventHandler(window, "blur", this._fS); 
//默认動作を阻止します 
oEvent.preventDefault(); 
}; 
//附加程序 
this.onStart(); 
}, 
//補正範囲
Repair: function() { 
if(this.Limit){ 
//補正誤差範囲パラメータ
this.mxRight = Math.max(this.mxRight , this.mxLeft this.Drag.offsetWidth); 
this.mxBottom = Math.max(this.mxBottom, this.mxTop this.Drag.offsetHeight); 
//コンテナがある場合、位置は相対位置に設定し、オフセットを取得する前に 
 を設定します。this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative") ; 
 } 
}, 
//ドラッグ
移動: function(oEvent) { 
//ロックされているかどうかを判断します
if(this.Lock){ this.Stop( ); return; } ; 
//選択をクリア
? window.getSelection().removeAllRanges() : document.selection.empty(); iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y 
//範囲制限を設定します
if(this.Limit){ 
//範囲パラメータを設定します
var mxLeft = this.mxLeft , mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; 
//コンテナが設定されている場合は、範囲パラメータを修正します 
if(!!this._mxContainer) { 
mxLeft = Math.max(mxLeft, 0); 
mxTop = Math.max(mxTop, 0); 
mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min( mxBottom, this._mxContainer.clientHeight); 
}; 
//移動パラメータを修正します
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag. offsetWidth), mxLeft); 
iTop = Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); 
} 
// 位置と正しいマージンを設定します 
if(!this.LockX ){ this.Drag.style.left = iLeft - this._marginLeft "px"; } 
if(!this.LockY){ this.Drag.style.top = iTop - this. _marginTop "px"; } 
//追加プログラム
this.onMove(); 
//ドラッグを停止
Stop: function() { 
//イベントを削除
removeEventHandler( document, "mousemove", this._fM); 
removeEventHandler(document, "mouseup", this._fS); 
if(isIE){ 
removeEventHandler(this._Handle, " losscapture", this._fS); 
this._Handle.releaseCapture(); 
}else{ 
removeEventHandler(window, "blur", this._fS); 
}; 
/ /追加プログラム
this.onStop(); 
} 
};

 
テストコード: 
コード 

コードをコピーします

コードは次のとおりです: #idContainer{ border:10px width:600px; :300px;}

# idDrag{ ボーダー:5px ソリッド #C4E3FD; 幅:50px; 左:50px;}

#idHandle{カーソル:高さ: :25px; オーバーフロー:非表示;} 

 id="idHandle">

🎜>
>
>

ドラッグアンドドロップのステータス: 開始されていません< ;/span>
< ;script>
varrag = new Drag("idDrag", { mxContainer: "idContainer", ハンドル: "idHandle", Limit: true,
onStart: function(){ $("idShow").innerHTML = "ドラッグアンドドロップを開始"; },
onMove: function(){ $("idShow").innerHTML = "left:" this.Drag.offsetLeft ";top:" this.Drag.offsetTop; },
onStop: function(){ $("idShow").innerHTML = "ドラッグアンドドロップを終了" }
$("idReset"); onclick = function(){
drag.Limit = true;
drag.mxLeft =rag.mxTop = 0;
drag.mxBottom = 9999; LockY = ドラッグ.ロック = false;
}
$("idLock").onclick = function(){ ドラッグ.Lock = true; }
$("idLockX").onclick = function() { ドラッグ.LockX = true; }
$("idLockY").onclick = function(){ ドラッグ.LockY = true; }
$("idLimit").onclick = function(){ = ドラッグ.mxBottom = 200;ドラッグ.リミット = true; }
$("idLimitOff").onclick = function(){ ドラッグ.リミット = false;

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScript ドラッグ アンド ドロップ効果コード_JavaScript スキル

関連記事

JavaScript ドラッグアンドドロップ効果コード_JavaScript スキル