JS 拖拽问题
Posted 做个机灵鬼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 拖拽问题相关的知识，希望对你有一定的参考价值。
分三步
1.按住鼠标不放绑定一个响应函数 onmousedowm
2.按住鼠标移动的过程绑定一个响应函数 onmousemove
3.松开鼠标绑定一个响应函数 onmouseup
注意点 ：1.第二步和第三步需要嵌套在 第一步内
2.在松开鼠标的时候 需要对 第二步和第三步进行一个释放
document.onmousemove = null;
//要把松开事件这个事件本身关闭
document.onmouseup = null;
3 . onmousemove和onmouseup 都是绑定document ，这样才能在整个页面移动.
4.当浏览器拖拽网页的时候，浏览器会搜索引擎里面的内容，这是浏览器的默认行为会影响浏览器的拖拽行为。
利用retrun false
例子
<style>
#box1
width: 100px;
height: 100px;
background-color: blue;
/* 重新设置坐标的盒子必须给盒子加定位 */
position: absolute;
#box2
width: 200px;
height: 100px;
background-color: blueviolet;
left: 300px;
position: relative;
</style>
<script>
window.onload = function ()
var box2 = document.getElementById("box2");
var box1 = document.getElementById("box1");
drag(box2);
drag(box1);
function drag(obj)
/*
事件拖拽分为三步走
1-按住鼠标不放 onmousedown
2-移动鼠标，目标获取鼠标的坐标
3-松开鼠标的时，目标固定在当前位置
*/
//按住鼠标不放，即开始拖拽
obj.onmousedown = function (event)
//兼容ie8
/* if(obj.setCapture)
obj.setCapture;
*/
var lf = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 移动鼠标 获取鼠标的坐标赋给对象
document.onmousemove = function (event)
event = event || window.event;
var left = event.clientX - lf;
var top = event.clientY - ot;
//把坐标赋给box1
obj.style.left = left + "px";
obj.style.top = top + "px";
;
//松开鼠标的时候，把对象固定在当前鼠标的位置
document.onmouseup = function ()
document.onmousemove = null;
//要把松开事件这个事件本身关闭
document.onmouseup = null;
;
/* if( obj.releaseCapture)
obj.releaseCapture
*/
/*
当浏览器拖拽网页的时候，浏览器会搜索引擎里面的内容，这是浏览器的默认行为
会影响浏览器的拖拽行为
*/
//这里对ie8及以下版本不管用
return false;
;
;
</script>
</head>
<body>
这是一段文字
<div id="box1"></div>
<div id="box2"></div>
</body>
以上是关于JS 拖拽问题的主要内容，如果未能解决你的问题，请参考以下文章