js源代码实现拖拽效果

原创 2013年12月04日 10:30:42

下面的例子摘抄至 http://www.jb51.net/article/37905.htm

 
<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
#main div{position:absolute;width:220px;height:150px;border:1px solid #999;} 
</style> 
<script type="text/javascript"> 
var a;
document.onmouseup = function() {
    if (!a) return;
    a = "";
};
document.onmousemove = function(d) {
    if (!a) return;
    d = d || event;
    a.style.left = (d.clientX - b) + "px";
    a.style.top = (d.clientY - c) + "px";
};
function $(o, e) {
    a = o;
    b = e.clientX - parseInt(a.style.left);
    c = e.clientY - parseInt(a.style.top);
}
</script> 
</head> 
<body> 
<div id="main"> 
<div style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">1</div> 
<div style="left:400px;top:100px;background:#9cf;" onmousedown="$(this,event)">2</div> 
<div style="left:700px;top:100px;background:#f9c;" onmousedown="$(this,event)">3</div> 
<div style="left:100px;top:300px;background:#9fc;" onmousedown="$(this,event)">4</div> 
<div style="left:400px;top:300px;background:#c9f;" onmousedown="$(this,event)">5</div> 
<div style="left:700px;top:300px;background:#cf9;" onmousedown="$(this,event)">6</div> 
</div> 
</body> 
</html> 

 

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>无标题文档</title> 
<style type="text/css"> 
#test{width:200px; height:200px; background:pink; cursor:move; position:absolute; left:100px; top:100px} 
</style> 
</head> 
<body> 
<div id="test"></div> 
<script type="text/javascript"> 
var obj = document.getElementById("test");
var b;
obj.onmousedown = function(e) {
    b = true;
    var divLeft = parseFloat(window.getComputedStyle ? window.getComputedStyle(obj, null).left: obj.currentStyle.left);
    var divTop = parseFloat(window.getComputedStyle ? window.getComputedStyle(obj, null).top: obj.currentStyle.top);
    var e = e || event;
    var divX = e.clientX - divLeft; //计算鼠标和div边框的距离 
    var divY = e.clientY - divTop;
    document.onmousemove = function(e) {
        if (b) {
            var e = e || event; //兼容IE8及以下 
            obj.style.left = e.clientX - divX + "px";
            obj.style.top = e.clientY - divY + "px";
        }
    }
}
document.onmouseup = function() {
    b = false;
}
</script> 
</body> 
</html> 

 

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>无标题文档</title> 
<style type="text/css"> 
*{margin:0;padding:0} 
#testBox{ width:300px; height:300px; background:red; position:absolute; left:0; top:0} 
#test{width:200px; height:200px; background:pink; cursor:move; margin:30px} 
</style> 
</head> 
<body> 
<div id="testBox"> 
<div id="test">在这里才能移动</div> 
</div> 
<script type="text/javascript"> 
var obj = document.getElementById("test");
var objBox = document.getElementById("testBox");
var b;
obj.onmousedown = function(e) {
    b = true;
    var divLeft = parseFloat(window.getComputedStyle ? window.getComputedStyle(objBox, null).left: objBox.currentStyle.left);
    var divTop = parseFloat(window.getComputedStyle ? window.getComputedStyle(objBox, null).top: objBox.currentStyle.top);
    var e = e || event;
    var divX = e.clientX - divLeft; //计算鼠标和div边框的距离 
    var divY = e.clientY - divTop;
    document.onmousemove = function(e) {
        if (b) {
            var e = e || event; //IE8及以下浏览器得写这句 
            objBox.style.left = e.clientX - divX + "px";
            objBox.style.top = e.clientY - divY + "px";
        }
    }
}
document.onmouseup = function() {
    b = false;
}
</script> 
</body> 
</html> 

 

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。

 

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。

 

pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动。

 

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

 

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。

原生js实现拖拽功能基本思路

如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。 onmousedown:鼠标按下事件onmousemove:鼠标移动事件onmouseup:鼠标抬起...
  • gongzhuxiaoxin
  • gongzhuxiaoxin
  • 2016年10月22日 20:56
  • 2011

JS+DIV 实现拖动效果

效果图 思路 代码 优化封装以及解决拖动问题事件捕获效果图思路代码 Title ...
  • mixi9760
  • mixi9760
  • 2016年07月28日 20:59
  • 3572

jquery div拖动效果示例代码

jquery div拖动效果示例代码
  • bingle14
  • bingle14
  • 2017年03月29日 10:44
  • 1827

原生js实现四种拖拽效果

  • 2017年06月13日 20:08
  • 5KB
  • 下载

js 实现拖拽效果

  • 2013年07月23日 17:17
  • 17KB
  • 下载

超级JS拖拽的效果实现,只有一个html文件

  • 2009年07月30日 15:25
  • 12KB
  • 下载

学习Ajax框架之dojo:第四节——Dojo拖拽效果的实现(附源代码)

Dojo在dojo.dnd包中提供了对页面元素拖拽效果的支持,其中用于实现拖拽效果的关键类如下。       dojo.dnd.HtmlDragSource       dojo.dnd.Html...
  • zhigangsun
  • zhigangsun
  • 2014年03月25日 13:48
  • 265

纯JS(JavaScript)实现拖拽效果,兼容各大浏览器

为了让每一个看了这篇博客的人都会拖拽效果,我会以最简单最有条理的为大家讲清楚。 首先大致讲解一下拖拽的实现思路 确定拖拽对象,就是需要拖拽的元素,我们给它一个id或一个class作为唯一标识 拖拽过程...
  • qq_35616850
  • qq_35616850
  • 2017年11月01日 16:48
  • 98

JS实现图片拖拽交换效果

JS实现图片拖拽交换效果 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的;感谢老师的讲解。 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域...
  • qq_32392057
  • qq_32392057
  • 2017年03月03日 16:00
  • 1238

js实现窗口拖拽效果

#box { width: 300px; background-color: green; position: absolute; } h2{ width:100% }...
  • u012612399
  • u012612399
  • 2017年03月16日 14:14
  • 1087
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js源代码实现拖拽效果
举报原因:
原因补充:

(最多只允许输入30个字)