比较精简的Javascript拖动效果函数代码_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:37:40

比较精简的Javascript拖动效果函数代码_javascript技巧

比较精简的Javascript拖动效果函数代码_javascript技巧: 拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px;

推荐度：

点击下载本文 文档为doc格式

导读比较精简的Javascript拖动效果函数代码_javascript技巧: 拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px;

<html> 
<head><title>拖动效果函数演示 by Longbill.cn</title> 
<style> 
body 
{ 
 font-size:12px; 
 color:#333333; 
 border : 0px solid blue; 
} 
div 
{ 
 position : absolute; 
 background-color : #c3d9ff; 
 margin : 0px; 
 padding : 5px; 
 border : 0px; 
 width : 100px; 
 height:100px; 
} 
</style> 
</head> 
<body> 
 
function drag(o,s) 
{ 
 if (typeof o == "string") o = document.getElementById(o); 
 o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; 
 o.orig_y = parseInt(o.style.top) - document.body.scrollTop; 
 o.orig_index = o.style.zIndex; 
 
 o.onmousedown = function(a) 
 { 
 this.style.cursor = "move"; 
 this.style.zIndex = 10000; 
 var d=document; 
 if(!a)a=window.event; 
 var x = a.clientX+d.body.scrollLeft-o.offsetLeft; 
 var y = a.clientY+d.body.scrollTop-o.offsetTop; 
 //author: www.longbill.cn 
 d.ondragstart = "return false;" 
 d.onselectstart = "return false;" 
 d.onselect = "document.selection.empty();" 
 
 if(o.setCapture) 
 o.setCapture(); 
 else if(window.captureEvents) 
 window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.onmousemove = function(a) 
 { 
 if(!a)a=window.event; 
 o.style.left = a.clientX+document.body.scrollLeft-x; 
 o.style.top = a.clientY+document.body.scrollTop-y; 
 o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; 
 o.orig_y = parseInt(o.style.top) - document.body.scrollTop; 
 }

d.onmouseup = function() 
 { 
 if(o.releaseCapture) 
 o.releaseCapture(); 
 else if(window.captureEvents) 
 window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
 d.onmousemove = null; 
 d.onmouseup = null; 
 d.ondragstart = null; 
 d.onselectstart = null; 
 d.onselect = null; 
 o.style.cursor = "normal"; 
 o.style.zIndex = o.orig_index; 
 } 
 } 
 
 if (s) 
 { 
 var orig_scroll = window.onscroll?window.onscroll:function (){}; 
 window.onscroll = function () 
 { 
 orig_scroll(); 
 o.style.left = o.orig_x + document.body.scrollLeft; 
 o.style.top = o.orig_y + document.body.scrollTop; 
 } 
 } 
} 
</ script>

div1:我可以被拖动 
div2:来拖我呀 
div3:我随便你拖 
div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看 
作者: Longbill
www.longbill.cn 
 
参数说明:
 
drag(obj [,scroll]);
 
obj:对象的id或对象本身;
 
scroll(可选):对象是否随窗口拖动而滑动，默认为否
 
鼠标右键查看源代码

drag("div1"); 
drag("div2"); 
drag("div3"); 
drag("div4",1); 
drag("div5",1); 
drag("div6",1);

</ script>

</body>

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