work_javascript スキルのために作成する必要がある js ドラッグ アンド ドロップ コンポーネント

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

/*
*使用法:
* var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200});
* d.ready();
*注意:
* の左側と上部のスタイルドラッグ オブジェクトはスタイル属性に記述する必要があります。
*
*/
//呼び出し元を修正します。 newObj のメソッドとして fn を呼び出します。
function RepairCaller(newObj, fn){
return function(){
return fn.apply(newObj, argument)
}
}
function Drag( config ){
this.moveTarget = T.dom.get( config.id );
this.startLeft = parseInt(this.moveTarget.style.left); // ドラッグが開始されるたびに左ドラッグされたオブジェクトの先頭
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = this.startLeft; //ドラッグ開始時にイベントの clientX、clientY を保存します。 >this.startClientY = this.startTop;
this.MAX_LEFT = config.maxLeft||document.documentElement.clientWidth - this.moveTarget.offsetWidth; //要素が移動できる最大範囲
this.MAX_TOP = config .maxTop||document.documentElement.clientHeight - this.moveTarget.offsetHeight;
this.lock = true;
Drag.prototype.ready = function(){
//バインドイベント
T.bind(document, "mousedown",repairCaller(this,this.down));
T.bind(document, "mousemove",repairCaller(this, this.move)); .bind(document, "mouseup",repairCaller(this,this.stop));
}
Drag.prototype.down = function(){
//イベントオブジェクトを取得します
varイベント= T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if (target == this.moveTarget){
this.lock = false; 🎜 >//イベントの開始時にさまざまな座標位置を保存します
this.startLeft = parseInt(this.moveTarget.style.left);
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX =event.clientX;
this.startClientY =event.clientY;
Drag.prototype.move = function(){
if(! this.lock ){
//イベントオブジェクトを取得します
var events = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event); (target = = this.moveTarget){
//選択内容がある場合はクリアします
//window.getSelection? window.getSelection().removeAllRanges(): document.selection.empty(); 🎜>// ドラッグ範囲が上限を超えていないか確認します
var realLeft = this.startLeftevent.clientX - this.startClientX, //実際の移動範囲
realTop = this.startTopevent.clientY - this.startClientY ,
rightLeft, rightTop; // 左上値を修正します
rightLeft = realLeft > this.MAX_LEFT : ( realLeft > 0 ? realLeft : 0 ); this .MAX_TOP ? this.MAX_TOP : ( realTop > 0 ? realTop : 0 );
this.moveTarget.style.left = rightLeft "px"; ;
}
else{
this.lock = true;
}
}
}; lock = true
};


追記:
書き込みプロセス中に注意する必要があるいくつかの点は次のとおりです。
1.ドラッグレイヤーはスタイルで記述する必要があります
2. 移動中に左と上にユニットを設定します。そうしないと機能しません
3. マルチレベル div をネストする場合は、over-flow:hidden を追加する必要がありますスタイルを親 div に
完了!