在一些交互性强的前端页面中，经常用到物件拖动，因此封装了一下拖动控件的代码。
使用时只需绑定htc拖动控件，然后设定一些可拖动控件(其position需设为absolute)的canMove属性(为1表示可以拖动)，layernum属性（拖动时，移动哪一个父元件）
<!--Author: Kw.TsouDate: 2005/11/26Content: 为页面上的元件提供自由移动的功能UseMark: 在body(或其它容器)上behavior此物件，然后在需要移动的物件上设置canMove = "1" ,如果不是移动本身，则可以设置layernum指向其父元素.(注意：该移动的物件的position必须为absolute)--><PUBLIC:COMPONENT> <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="move_eDown()" /> <PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="move_eUp()" /> <PUBLIC:ATTACH EVENT="onmousemove" ONEVENT="move_eMove()" /> <PUBLIC:EVENT ID="moveevent" NAME="ontagmove"/></PUBLIC:COMPONENT>
<SCRIPT Language="JavaScript">
var current = null; var offsetX = 0; var offsetY = 0; var dragging = false; var startedDragging = false; var ismove = false; function setCurrent(w)
{
current = w; if(current.style.position!="absolute"){ alert("可移动物件的position必须为absolute,才可更好地移动"); return;
} var ex = event.clientX; var ey = event.clientY; offsetX = event.x - current.offsetLeft; offsetY = event.y - current.offsetTop; dragging = true; ismove = false; } function moveCurrent() { if (!dragging || !current) return; if (event.button == 0) { releaseCurrent(); return; } if (!startedDragging) { startedDragging = true; } var ex = event.clientX; var ey = event.clientY; var newl = ex - offsetX; var newt = ey - offsetY if(newl!=current.style.pixelLeft||newt!=current.style.pixelTop){ current.style.pixelLeft = ex - offsetX; current.style.pixelTop = ey - offsetY; ismove = true; } window.event.returnValue = false; window.event.cancelBubble = true; } function releaseCurrent() { current=null; dragging = false; startedDragging = false; window.event.returnValue = false; window.event.cancelBubble = true; } //取得移动对象(如只能拖动标题栏进行移动) function getOpreateElement(el){ //debug(); var ret = el; var layernum = 0; if(el.layernum) layernum = parseInt(el.layernum); for(var i=0;i<layernum;i++) { ret = ret.parentElement; } return ret; } function move_eDown() { var e = window.event; var el = e.srcElement; if(el.canMove=="1"){ el = getOpreateElement(el); if(!el.isLock){ if(!(el.isResize=="1"&&el.runtimeStyle.cursor.indexOf("resize")>0)) setCurrent(el); } } } function move_eUp() { var tmp =null; if(current!=null) tmp = current; releaseCurrent(); if(tmp!=null&&ismove){ var evt = createEventObject(); evt.src = tmp; try { moveevent.fire(evt); } catch(e) {}; } ismove = false; tmp = null; } function move_eMove() { moveCurrent(); }
</SCRIPT><html><head><title>什么都可以拖动</title><style>body,div,td,font{font:menu;}div,td{text-align:center}</style></head><body style="margin:0px"><div ontagmove="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop" style="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef"> <div canMove = "1" style="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;"> 这是一个div </div> <div style="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;"> <div style="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove="1" layernum="1">只有标题可以拖动</div> 这是一个div </div> <table border="1" bordercolor="green" style="width:50%;height:50%;position:absolute"> <tr> <td canMove="1" layernum="3" colspan="2" style="cursor:move;background-color:blue;color:white">这是表格的标题行</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table></div></body></html>
预览：
