您的位置：首页 > 运维架构

web拖动Drag&amp;Drop原理

2008-02-10 09:55 417 查看

<html>

<head>

<title>Page Title</title>

<style>...

.drag {...}{

cursor: move;

}

.box {...}{

margin: 0px;

width: 200px;

border: 1px solid #ccc;

}

.box h3.title {...}{

margin: 0px;

width: 100%;

background-color: #ccc;

}

.box div.content {...}{

margin: 0px;

width: 100%;

text-align: left;

}

</style>

//GreatGhoul

//兼容ff, ie

//要拖动的对象的title设置为'dragable'

//拖动点的class设置为'drag'，拖动点必须为可拖动对象的子节点

var DragableObj = ...{

handle: null,

dx: 0,

dy: 0,

init: function(e) ...{

e = e || event;

this.handle = e.target || e.srcElement;

if (this.handle.className.indexOf('drag') == -1) return;

while (this.handle.tagName != 'HTML' && this.handle.title != "dragable") ...
{

this.handle = this.handle.parentNode || this.handle.parentElement;

}

if (this.handle.title != 'dragable') return;

this.handle.style.position = 'relative';

this.dx = parseInt(this.handle.style.left + 0) - e.clientX;

this.dy = parseInt(this.handle.style.top + 0) - e.clientY;

document.onmousemove = DragableObj.drag;

drag: function(e) ...{

e = e || event;

if (this.handle != null) ...{

this.handle.style.left = (e.clientX + this.dx) + 'px';

this.handle.style.top = (e.clientY + this.dy) + 'px';

}

drop: function(e) ...{

this.handle = null;

document.onmousemove = null;

}

};

document.onmousedown = DragableObj.init;

document.onmouseup = DragableObj.drop;

document.onselectstart = function(e) ...{

e = e || event;

eo = e.target || event.srcElement;

if (eo.className.indexOf('drag') != -1) return false;

};

</script>

</head>

<body>

<br>例１：

</div>

<br>例２：

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

web拖动Drag&amp;amp;Drop原理

web拖动Drag&Drop原理