JS ドラッグ エフェクト クラスと dom-drag.js_javascript スキルの簡単な分析

これは、ドラッグ アンド ドロップ機能を実装するだけの非常に単純なクラスです。もちろん、コードはオリジナルのままで簡潔です。
Code

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

/************************************************
* Drag.js
* 著者: Oak Lodge 07.17.2010
* http://www.cnblogs.com/babyzone2004/
* 使用法: Drag.initDrag(id) ID はタグの ID です。名前
********************************************* ** ****/
var Drag={
dragObject: null,
mouseOffset:null,
initDrag:function(item){
if(item){
this.item=document.getElementById(item);
this.item.onmousedown= function(evnt ){
document.onmouseup=Drag.mouseUp;
Drag.dragObject=this
Drag.mouseOffset=Drag.getMouseOffset(this,evnt) );
return false;
}
},
mousePoint:function(x,y){
this.x=x; ;
},
mousePosition:function (evnt){
evnt=evnt||window.event;
var x=parseInt(evnt.clientX); .clientY) ;
return new Drag.mousePoint(x,y);
getMouseOffset:function(target,evnt){
var MousePos=Drag.mousePosition(evnt); >var x =mousePos.x-target.offsetLeft;
var y=mousePos.y-target.offsetTop;
return new Drag.mousePoint(x,y);
mouseUp: function (evnt ){
Drag.dragObject=null;
document.onmouseup = null;
mouseMove:function(evnt){
if(! Drag.dragObject) return;
var MousePos=Drag.mousePosition(evnt);
Drag.dragObject.style.position="absolute";
Drag.dragObject.style.top=mousePos y-ドラッグ .mouseOffset.y "px";
Drag.dragObject.style.left=mousePos.x-Drag.mouseOffset.x "px";
return
}
}


コードはそれほど複雑ではないので、詳細は説明しません。必要に応じて、直接ダウンロードして使用できます。インポート後、Drag.initDrag (ID 名) メソッドを使用して適用します。
実際、インターネット上にはすでに軽量の dom-drag クラス ライブラリがあります (作成者: Aaron Boodman)。私が作成したクラス ライブラリを振り返ると、自信に満ちています。 http://boring.youngpup.net/projects/dom-drag/Download で見つけることができます。コードは非常にシンプルで、多くの使いやすい機能を提供します。非常に詳細な例が Web サイトに掲載されています。
このクラス ライブラリは Flash の startDrag メソッドに似ており、合理化されたコードと実用的な機能を備えています。コンポーネントをドラッグ可能にしたい場合は、Drag.init() メソッドを呼び出すことができます。
init: function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
o: マウスドラッグを実現したいコンポーネントです。
oRoot: oコンポーネントの上層はoと一緒にドラッグされます;
minX、maxX、minY、maxY: マウスのドラッグ範囲を設定します。以下のクロッパーの例からわかるように、oRootがある場合、範囲が決定されます。ページを基準とした oRoot による;
bSwapHorzRef、bSwapVertRef: コンポーネントの優先度を設定します。
fXMapper、fYMapper: ドラッグ パスを設定します。

リンクの例: http ://boring .youngpup.net/projects/dom-drag/ex3.html
ドラッグ範囲を制限できます。コードは次のとおりです:




コピーcode


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

< ;html> 位置:absolute; width:12px;

border:1px; 🎜>}

init の 4 つの数値パラメーターは、要素をドラッグできる領域、左上と右下の x、y 座標に対応します。したがって、要素はスクロール バーと同様に、(25, 25) と (25, 200) の直線の間でのみスライドできます。
このクラスライブラリはシンプルな機能ですが、他の機能と組み合わせることでフラッシュのような華やかな効果を生み出すことができます。
デモ コード:
http://demo.jb51.net/js/dom-drag/demo.htmlコードのパッケージ化:
http://www.jb51.net/ jiaoben/28492.html