本文介绍了一种使用HTML、CSS及JavaScript实现元素拖拽的方法。通过设置特定的类名和属性，可以使得页面中的元素变得可拖动，并详细解释了其工作原理。
<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><script type="text/javascript">...//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 class="box" title="dragable">
<h3 class="drag title">拖动标题</h3>
<div class="content">内容</div>
</div>
<br>例２：
<div class="drag" title="dragable">拖动我</div>
</body>
</html>
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 class="box" title="dragable"><h3 class="drag title">拖动标题</h3><div class="content">内容</div></div><br>例２：<div class="drag" title="dragable">拖动我</div></body></html>
扫一扫
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
