客户端拖动控件封装（让拖动变得更简单）

在一些交互性强的前端页面中，经常用到物件拖动，因此封装了一下拖动控件的代码。

使用时只需绑定htc拖动控件，然后设定一些可拖动控件(其position需设为absolute)的canMove属性(为1表示可以拖动)，layernum属性（拖动时，移动哪一个父元件）

<!--

Author: Kw.Tsou

Date: 2005/11/26

Content: 为页面上的元件提供自由移动的功能

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>

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>

这是一个div

</div>

<div style="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove="1" layernum="1">只有标题可以拖动</div>

这是一个div

</div>

<tr>

<td canMove="1" layernum="3" colspan="2" style="cursor:move;background-color:blue;color:white">这是表格的标题行</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

预览：

testmove.htm

下载：
moveable.rar

posted on 2006-05-19 14:20 Kevin Zou 阅读(2716) 评论(8) 收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

十年磨一劍--從程序員到架構師

公告