js代碼
-------------------------------------------------------------------------
function DragDrop(args){ // 拖動時說明，未指定時為空 args.moveText = args.moveText || "" ; if ( ! args.obj) return ; if ( ! args.target) return ; isIE = document.all; var obj = args.obj; obj.style.cursor = " move " ; obj.onmousedown = function (e){ // 将要拖動 if ( ! document.all)e.preventDefault(); document.body.style.cursor = ' default ' ; if (args.dragStart){args.dragStart( this );} var opos = getObjPos( this ); var cpos = getCurPos(e); this .moveFlag = true ; var md = document.createElement( " div " ); document.body.appendChild(md); this .md = md; with (md.style){ // 拖動時說明樣式 position = " absolute " ; border = " 1px solid #f00 " ; background = " transparent " ; fontSize = " 9pt " ; md.innerHTML = args.moveText; height = ( this .offsetHeight - (isIE ? 2 : 2 )) + " px " ; if (args.moveText == "" ) width = ( this .offsetWidth - (isIE ? 0 : 2 )) + " px " ; top = cpos.y - parseInt(md.offsetHeight); left = cpos.x - parseInt(md.offsetWidth) / 2; } obj.target = null ; tas = args.target; ts = new Array(); tas.length ? ts = tas:ts[ 0 ] = tas; tsc = ts.length; obj.docMmove = document.onmousemove; document.onmousemove = function (e){ // 開始拖動 if ( ! obj.moveFlag) return false ; document.body.style.cursor = ' default ' ; var Pos = getCurPos(e); obj.target = null ; var nmd = obj.md; nmd.style.left = Pos.x - parseInt(nmd.offsetWidth) / 2+'px'; nmd.style.top = Pos.y - parseInt(nmd.offsetHeight) + ' px ' ; if (args.btouch) for (i = 0 ;i < tsc;i ++ ){ args.btouch(ts[i]); } for (i = tsc - 1 ;i >= 0 ;i -- ){ if (checkTouch(nmd,ts[i]) && args.touch){ obj.target = ts[i]; args.touch(obj); break ; } } return false ; }; obj.docContextMenu = document.oncontextmenu; document.oncontextmenu = function (){ return false ; }; obj.docMup = document.onmouseup; document.onmouseup = function (e){ // 結束拖動 obj.moveFlag = false ; document.body.style.cursor = ' auto ' ; if (obj.md)document.body.removeChild(obj.md); if (obj.onmouseup)obj.onmouseup(); if (args.dragEnd && obj.target){ args.btouch(obj.target); args.dragEnd(obj); obj.target = null ; } setTimeout( function (){ // 還原借用事件 document.onmouseup = obj.docMup; obj.docMup = null ; document.oncontextmenu = obj.docContextMenu; obj.docContextMenu = null ; document.onmousemove = obj.docMmove; obj.docMmove = null ; }, 10 ); }; }; // 檢查兩個DIV是否有接觸 function checkTouch(o1,o2){ p1 = getObjPos(o1); p2 = getObjPos(o2); x1 = p1.x;y1 = p1.y; x2 = p2.x;y2 = p2.y; w1 = o1.offsetWidth; h1 = o1.offsetHeight; w2 = o2.offsetWidth; h2 = o2.offsetHeight; return ((x1 - x2 <= 0 ) && (x2 - x1 < w1) || (x1 - x2 >= 0 ) && (x1 - x2 < w2)) && ((y1 - y2 <= 0 ) && (y2 - y1 < h1) || (y1 - y2 >= 0 ) && (y1 - y2 < h2)); }; // 得到元素的左上角絕對坐标 function getObjPos(o){ var x = y = 0 ; if (o.getBoundingClientRect){ var box = o.getBoundingClientRect(); var D = document.documentElement; x = box.left + Math.max(D.scrollLeft,document.body.scrollLeft) - D.clientLeft; y = box.top + Math.max(D.scrollTop,document.body.scrollTop) - D.clientTop; } else { for (;o != document.body;x += o.offsetLeft,y += o.offsetTop,o = o.offsetParent); } return { ' x ' :x, ' y ' :y}; }; // 得到滑鼠絕對坐标 function getCurPos(e){ e = e || window.event; var D = document.documentElement; if (e.pageX) return {x:e.pageX,y:e.pageY}; return { x:e.clientX + D.scrollLeft - D.clientLeft, y:e.clientY + D.scrollTop - D.clientTop }; };}
html代碼
------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="dragdrop.js"></script>
<style>
.item{width:50px;height:20px;border:1px solid #000;background:#ccc;}
#items{margin-top:100px;position:absolute;top:5px;left:5px;width:100px;height:100px;border:1px solid #000;}
#target,#target2,#target3,#target4{position:absolute;width:100px;height:100px;border:1px solid #000;}
#target{top:100px;left:300px;}
#target2{top:150px;left:350px;}
#target3{top:100px;left:430px;}
#target4{top:30px;left:360px;}
</style>
</HEAD>
<BODY>
說明：可将左側框内的黑框拖到右側四個框之一，也可以将它們拖回來。
<div id="items">
<div class="item">s1</div>
<div class="item">s2</div>
<div class="item">s3</div>
<div class="item">s4</div>
</div>
<div id="targets">
<div id="target"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
</div>
<script>
d=document.getElementById("items").getElementsByTagName("div");
c=d.length;
for(i=0;i<c;i++){
d[i].onmouseup=function(){
this.style.background='#ccc';
}
drag(d[i]);//初始化
}
function drag(oo){
DragDrop({
obj:oo,//拖動元素
moveText:'将'+oo.innerHTML+'拖至右側框',//拖動時說明
//開始拖動執行方法，o為拖動元素
dragStart: function(o){
o.style.background='#f00';
},
//成功結束拖放時執行方法，o為拖動元素，o.target為目标元素
//在這裡可以進行自己的業務運算，進行資料交換等
dragEnd: function(o){
o.target.appendChild(o);
back(o);
},
//目标元素，可為數組
target:document.getElementById("targets").getElementsByTagName("div"),
//拖動元素與目标未接觸時，目标執行方法，t為目标對象, 可用來還原接觸後的樣式
btouch:function(t){fbtouch(t)},
//拖動元素與目标接觸時，執行方法, o為拖動元素，
//o.target指向目标元素,可用來設定接觸後的樣式
touch:function(o){ftouch(o)}
});
}
function back(oo){
DragDrop({
obj:oo,
moveText:'将'+oo.innerHTML+'拖回',
dragStart: function(o){
o.style.background='#f00';
},
dragEnd: function(o){
o.target.appendChild(o);
drag(o);
},
target:document.getElementById("items"),
btouch:function(t){fbtouch(t)},
touch:function(o){ftouch(o)}
});
}
function fbtouch(t){
t.style.border="1px solid black";
}
function ftouch(o){
o.target.style.border="2px solid red";
}
</script>
</BODY>
</HTML> ![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)