javascript 公用拖拽类代码

206 阅读 0 评论 136 点赞

我是靠谱客的博主爱听歌棉花糖，这篇文章主要介绍javascript 公用拖拽类代码，现在分享给大家，希望可以做个参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>D类</title> 
<style type="text/css"> 
html, body { 
margin:0; 
} 
</style> 
 
</head> 
<body> 
<div style="position:relative; width:100px; height:100px; background-color:#000000;"> 
<div style="position:absolute; width:20px; height:20px; line-height:20px; left:50%; top:50%; margin:-10px 0 0 -10px;

background-color:#F00; text-align:center; cursor:move;" 
onmousedown="var wc = this;D.start(wc, null, function (property) { 
var node = wc.parentNode; 
var a = D.pos(node), b = D.pos(wc); 
node.style.left = property.left - b.x + a.x + 'px'; 
node.style.top = property.top - b.y + a.y + 'px'; 
}, null);" 
>拽</div> 
</div>

<div style="width:50px; height:50px; line-height:50px; text-align:center; background-color:#F00; position:absolute;

cursor:move;" 
onmousedown="var wc = this;D.start(wc, null, function (property) { 
wc.style.left = property.left + 'px'; 
wc.style.top = property.top + 'px'; 
}, null);" 
>拽</div> 
<div style="height:1000px;"></div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]