JavaScript中可以使用window.event对象的clientX与clientY属性来获取鼠标在页面中的坐标,通过计算鼠标坐标移动来进行元素的坐标改变即可实现拖拽。
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。
1.onmousedown:鼠标按下事件
2.onmousemove:鼠标移动事件
3.onmouseup:鼠标抬起事件
重点:
1、一定要绝对定位,脱离文档流才可以移动。
2、绑定拖拽的元素,移动和鼠标松开后是对document的绑定,因为移动的是整个div。
3、点击:a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。
移动:通过 a - c 建立鼠标与div的关系,防止鼠标超出div。
基本思路:
拖拽状态 = 0鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 } 鼠标在元素上移动的时候{ 如果拖拽状态是0就什么也不做。 如果拖拽状态是1,那么 元素y = 现在鼠标y - 原来鼠标y + 原来元素y 元素x = 现在鼠标x - 原来鼠标x + 原来元素x } 鼠标在任何时候放开的时候{ 拖拽状态 = 0 }
DEMO
HTML:
<div class="box" id="drag"></div> .box { position:absolute; width:100px; height:100px; background:red; cursor:move; }
JS:
window.onload = function() { var drag = document.getElementById('drag'); // //点击某物体时,用drag对象即可,move和up是全局区域, // 也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动) drag.onmousedown = function(event) { var event = event || window.event; //兼容IE浏览器 //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 var diffX = event.clientX - drag.offsetLeft; var diffY = event.clientY - drag.offsetTop; if (typeof drag.setCapture !== 'undefined') { drag.setCapture(); } document.onmousemove = function(event) { var event = event || window.event; var moveX = event.clientX - diffX; var moveY = event.clientY - diffY; if (moveX < 0) { moveX = 0 } else if (moveX > window.innerWidth - drag.offsetWidth) { moveX = window.innerWidth - drag.offsetWidth } if (moveY < 0) { moveY = 0 } else if (moveY > window.innerHeight - drag.offsetHeight) { moveY = window.innerHeight - drag.offsetHeight } drag.style.left = moveX + 'px'; drag.style.top = moveY + 'px' } document.onmouseup = function(event) { this.onmousemove = null; this.onmouseup = null; //修复低版本ie bug if (typeof drag.releaseCapture != 'undefined') { drag.releaseCapture(); } } } }
网友评论文明上网理性发言 已有0人参与
发表评论: