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 实现拖拽效果

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

原生js实现四种拖拽效果

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

JS实现图片拖拽交换效果

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

js实现窗口拖拽效果

#box { width: 300px; background-color: green; position: absolute; } h2{ width:100% }...

js拖拽保存效果

  • 2015年12月09日 10:51
  • 5KB
  • 下载

React.js实现原生js拖拽效果及思考

一、起因&思路 不知不觉,已经好几天没写博客了。。。近来除了研究React,还做了公司官网。。。 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨。所以就用react来实现这...

js拖拽效果

  • 2013年07月12日 16:46
  • 10KB
  • 下载

js 元素拖拽效果

  • 2012年11月07日 17:48
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js源代码实现拖拽效果
举报原因:
原因补充:

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