如果你想實現Web上的組件能用鼠標隨意拖動到頁面的任意位置或指定的位置等，那你就要看看dom-drag.js了。dom-drag.js可以從http://youngpup.net/projects/dom-drag/下載到，作者 Aaron Boodman。
其作者稱其為面向現代DHTML瀏覽器的輕量級、 易于使用的拖放API。事實上DOM-Drag庫是做到了。
你想讓某個組件能夠拖動，你可以調用 Drag.init( ) 方法。
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
o ：是想現實鼠標拖動的組件；
oRoot ： 是o上層的組件，將隨o一起拖動；
minX, maxX, minY, maxY ：設置鼠標拖動的范圍，由下面的例子cropper可以看出，如果有oRoot,那范圍是由oRoot相對于頁面來說的；
bSwapHorzRef, bSwapVertRef ：設置組件的優先權；
fXMapper, fYMapper： 設置拖動的路徑
作者給了6個簡單例子說明Drag.init()的使用，每個例子都是簡單易懂的。
例子1：http://youngpup.net/projects/dom-drag/ex1.html
這個例子實現了一張圖片在頁面中用鼠標隨意的拖動
源代碼
<script language="javascript" src="dom-drag.js"></script>
<img id="foo" src="p.gif" style="position:absolute; left:20px; top:20px;" />
<script language="javascript">
Drag.init(document.getElementById("foo"));
</script> 上面這段代碼使id為foo的圖片實現了能鼠標拖動的功能，Drag.init(o,其他參數)，如果使用Drag.init(o)其他參數將使用默認值，null或true，但注意不能Drag.init(o,minX)，中間的參數是不能漏掉的。
style="position:absolute; left:20px; top:20px;"
注意： 組件的位置必需設置為absolute或relative 和 初始化開始的位置，就像上面的代碼一樣，Drag.init()方法必需是在組件被讀取了之后才能調用。
例子2：http://youngpup.net/projects/dom-drag/ex2.html
這個例子實現了通過子組件實現子父組件的拖動
源代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript" src="dom-drag.js"></script>
<style type="text/css">
#root {}{
position:absolute;
height:100px;
width:150px;
background-color:#F4F4F4;
border:1px solid #333;
}
#handle {}{
margin:2px;
padding:2px;
width:142px;
color:white;
background-color:navy;
font-family:verdana, sans-serif;
font-size:10px;
}
</style>
</head>
<body>
<div id="root" style="left:20px; top:20px;">
<div id="handle">Handle</div>
</div>
<script language="javascript">
var theHandle = document.getElementById("handle");
var theRoot = document.getElementById("root");
Drag.init(theHandle, theRoot);
</script>
</body>
</html>
通過對子組件"handle"的拖動，實現對 父組件"root"的拖動，注意是子組件"handle"放在前面
例子3: http://youngpup.net/projects/dom-drag/ex3.html
這個例子實現了對組件拖動范圍的限制
源代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript" src="dom-drag.js"></script>
<style type="text/css">
#thumb {}{
position:absolute;
height:50px;
width:12px;
background-color:#eee;
border:1px outset #eee;
}
</style>
</head>
<body>
<div id="thumb" style="left:25px; top:25px;"></div>
<script language="javascript">
var aThumb = document.getElementById("thumb");
Drag.init(aThumb, null, 25, 25, 25, 200);
</script>
</body>
</html>
這里的minX, maxX, minY, maxY分別為25，25，25，200。X都是25，Y是從25到200，那就是說組件只能在Y軸上25到200的范圍移動了。如果這4個屬性設置為null，那就是說為null的屬性是沒有限制的了，如果4個都為null就是表示組件在頁面上的拖動是沒有限制的。
例子4：http://youngpup.net/projects/dom-drag/ex4.html
這個例子是前面3個例子的結合，這也是個實用的例子,這個例子用到了ypSimpleScrollC.js。
源代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript" src="dom-drag.js"></script>
<script language="javascript" src="ypSimpleScrollC.js"></script>
<style type="text/css">
#root {}{
position:absolute;
height:100px;
width:150px;
background-color:#F4F4F4;
border:1px solid #333;
font-family:verdana, sans-serif;
font-size:10px;
}
#handle {}{
margin:2px;
padding:2px;
width:142px;
color:white;
background-color:navy;
cursor:default;
}
#thumb {}{
position:absolute;
height:25px;
width:11px;
background-color:#eee;
border:1px outset #eee;
}
p {}{
margin-top:0px;
margin-bottom:1em;
}
</style>
<script language="javascript">
var theHandle, theRoot, theThumb, theScroll;
var thumbTravel, ratio;
theScroll = new ypSimpleScroll("scroll", 2, 19, 128, 75);
window.onload = function() {
theHandle = document.getElementById("handle");
theRoot = document.getElementById("root");
theThumb = document.getElementById("thumb");
theScroll.load();
Drag.init(theHandle, theRoot);
Drag.init(theThumb, null, 135, 135, 19, 71);
// the number of pixels the thumb can travel vertically (max - min)
thumbTravel = theThumb.maxY - theThumb.minY;
// the ratio between scroller movement and thumbMovement
ratio = theScroll.scrollH / thumbTravel;
theThumb.onDrag = function(x, y) {
theScroll.jumpTo(null, Math.round((y - theThumb.minY) * ratio));
}
}
</script>
</head>
<body>
<div id="root" style="left:20px; top:20px;">
<div id="handle">Handle</div>
<div id="thumb" style="left:135px; top:19px;"></div>
<div id="scrollContainer">
<div id="scrollContent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
</div>
</div>
</body>
</html>
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
theScroll = new ypSimpleScroll("scroll", 2, 19, 128, 75);
''scroll" 我怎么找不到id為scroll的組件，不用急，看看ypSimpleScrollC.js，原來這個是設置
id="scrollContainer"
id="scrollContent"
的樣式啊，在命名上id + Container , id + Content，id可以改其他的，但后面的是固定的。
然后調用theScroll.load()方法
// the number of pixels the thumb can travel vertically (max - min)
thumbTravel = theThumb.maxY - theThumb.minY;
thumbTravel 是 theThumb在X軸能活動的像素。
// the ratio between scroller movement and thumbMovement
ratio = theScroll.scrollH / thumbTravel;
ratio是正文的高度 跟 垂直滾動條的滾動范圍 的比例
theThumb.onDrag = function(x, y) {
theScroll.jumpTo(null, Math.round((y - theThumb.minY) * ratio));
}
調用theThumb的onDrag事件，是正文 跟 滾動條以相同的比例滾動，實現同步
例子5：http://youngpup.net/projects/dom-drag/ex5.html
這個例子有3個在頁面中可以任意拖動的圖片A、B、C，但如果三位老兄的位置重疊了呢，誰在上？誰在下？打架解決嗎？肯定不行啦，大家都是文明人嘛！作者提供了一種能解決少數組件重疊的，誰主誰次的方法。
源代碼：
<script language="javascript" src="dom-drag.js"></script>
<img id="p" src="p.gif" style="position:absolute; left:50px; bottom:20px;" />
<img id="g" src="g.gif" style="position:absolute; right:20px; bottom:100px;" />
<img id="b" src="b.gif" style="position:absolute; left:60px; top:20px;" />
<script language="javascript">
Drag.init(document.getElementById("p"), null, null, null, null, null, false, true);
Drag.init(document.getElementById("g"), null, null, null, null, null, true, true);
Drag.init(document.getElementById("b"), null, null, null, null, null, false, false);
</script>
這個 g 是在最上層的， p 是在中間層的 ， b 是在最下層的。
Drag.init(document.getElementById("p"), null, null, null, null, null, false, true);
Drag.init(.....,false,true);后面兩個參數決定了組件在重疊時的地位。
最高的當然是true,true啦，最低的是false,false。理論上是有4種組合的
true,true->true,false->false,ture->false,false 。
如果你有太多要拖動的組件啦，那沒辦法啦，你自己可以試試改寫js中的代碼，讓其能支持更多，9或16或更多。
例子6: http://youngpup.net/projects/dom-drag/ex6.html
這個例子中，圖片的拖動是隨著一定的路徑，不是原先的可以隨意拖動了
源代碼：
<script language="javascript" src="dom-drag.js"></script>
<img id="p" src="p.gif" style="position:absolute; left:20px; top:50px;" />
<script language="javascript">
window.onload = function() {
Drag.init(document.getElementById("p"), null, null, null, null, null, false, false, null, mySin);
}
function mySin(x) {
return Math.round(Math.sin((x - 20) / 10) * 10) + 50;
}
</script>
Drag.init(document.getElementById("p"), null, null, null, null, null, false, false, null, mySin);
看到最后2個參數了嗎？倒數第二個是設置x軸上的路徑的，最后一個是設置y軸上的路徑的。倒數第二個參數設置為null表示在x軸上的路徑是隨意的，y軸則是沿著正弦路徑。
例子cropper：http://youngpup.net/projects/dom-drag/cropper.html
這個例子是在一張圖片上實現部分清晰顯示效果。
源代碼：
<html>
<head>
<title> - cropper - </title>
<style type="text/css">
<!--
#pbox {}{
width:300px; height:300px;
overflow:hidden;
}
.opacity{}{filter: alpha(opacity=60)}
-->
</style>
<script language="javascript" src="dom-drag.js"></script>
<script language="javascript">
var oThang, oHandle, reportBox, iReportCount = 0;
window.onload = function() {
if (document.all || document.getElementById)
{
oThang = document.all ? document.all["thang"] : document.getElementById("thang")
oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
oReport = document.all ? document.all["report"] : document.getElementById("report")
Drag.init(oHandle, oThang, -250, -50, -250, -50);
// report stuff
oThang.onDrag = function(x, y) { reportDrag("", x, y); }
}
function reportDrag(who, x, y) {
oReport.value = who + "" + " X = " + (x + 250) + " Y = " + (y + 250) + " W = 100 H = 100"
}
oThang.onDrag(-250, -250);
}
</script>
</head>
<body>
<div style="width:300px; height:300px; overflow:hidden; top:20px; left:20px;">
<img src="snare_pic_large-300.jpg" />
<div id="thang" style="position:absolute; left:-250px; top:-250px;">
<img class="opacity" style="position:absolute; left:0px; top:0px;" src="selection2.gif" />
<img id="handle" style="position:absolute; left:250px; top:250px; width:100px; height:100px;" src="x.gif" />
</div>
</div>
<input type="text" id="report" style="width:300px;" />
</body>
</html>
這里面有3張圖片，一張是像素是300*300的snare_pic_large-300.jpg，一張是像素為600*600中間有個100*100空洞的selection.gif（這個我搞了半天才知道原來是中間破個洞－ －#！！），最后一張是張空白圖片的x.gif，其實就是利用把空圖片放在selection.gif的空洞的位置，然后同過空圖片帶動selection.gif。
<div style="width:300px; height:300px; overflow:hidden; top:20px; left:20px;">
<img src="snare_pic_large-300.jpg" />
這個<div>是父div，里面設置了寬度跟高度方便為300px，overflow : hidden 的作用是如果放進來的比如圖片的像素超過300*300，超過部分將被隱藏，這個div放在top 20，left 20的地方。
下面插入圖片snare_pic_large-300.jpg。
<div id="thang" style="position:absolute; left:-250px; top:-250px;">
<img class="opacity" style="position:absolute; left:0px; top:0px;" src="selection2.gif" />
<img id="handle" style="position:absolute; left:250px; top:250px; width:100px; height:100px;" src="x.gif" />
</div>
id為thang的<div>是上面的<div>的子div，注意設置thang的top，left的位置是相對于 父<div> 的，為了把空洞放在父<div>的左上角，thang的left -250，top -250，圖片selection.gif放在0，0位置，這是相對于thang的，x.gif設置成跟空洞愿意的寬度跟高度，放在250，250位置，這也是相對于thang的。
//頁面加載是初始化組件
window.onload = function() {
if (document.all || document.getElementById)
{
oThang = document.all ? document.all["thang"] : document.getElementById("thang")
oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
oReport = document.all ? document.all["report"] : document.getElementById("report")
//拖動范圍相對于父組件oTHang，空洞能移動的范圍是300-100＝200，x＝minX＋200＝-50，y也一樣
Drag.init(oHandle, oThang, -250, -50, -250, -50);
// 當oThang被拖動時調用函數reportDrag()在下面的input那里報位置
oThang.onDrag = function(x, y) { reportDrag("", x, y); }
//一些比較有用的方法還有onDragStart（x,y），開始拖動時調用，onDragEnd（x,y），結束拖動時調用
}
function reportDrag(who, x, y) {
//實際位置應該還要在+20像素
oReport.value = who + "" + " X = " + (x + 250) + " Y = " + (y + 250) + " W = 100 H = 100"
}
//初始化oThang的位置到-250，-250
oThang.onDrag(-250, -250);
}
引用：http://blog.csdn.net/lin49940/archive/2007/08/28/1761418.aspx