js 实现拖拽

来源:互联网 发布:淘宝看买家退货率 编辑:程序博客网 时间:2024/05/21 17:11

//实现拖拽主要是三个方法,鼠标按下、鼠标移动、鼠标松开

//还有就是要注意相对位置和绝对位置relative、absolute

var isDown = false;var ObjLeft, ObjTop, posX, posY, obj;//鼠标按下function down(event) {obj.style.cursor = "move";isDown = true;ObjLeft = obj.offsetLeft;ObjTop = obj.offsetTop;posX = parseInt(mousePosition(event).x);posY = parseInt(mousePosition(event).y);}//鼠标移动function move(event) {if (isDown == true) {var x = parseInt(mousePosition(event).x - posX + ObjLeft);var y = parseInt(mousePosition(event).y - posY + ObjTop);                var w = document.documentElement.clientWidth - obj.offsetWidth;                var h = document.documentElement.clientHeight - obj.offsetHeight;                if (x < 0) {x = 0;} else if (x > max_w) {x = max_w;};if (y < 0) {y = 0;}else if (y > max_h) {y= max_h;}obj.style.left = x + 'px';obj.style.top = y + 'px';}}//鼠标松开function up(evt) {isDown = false;}//鼠标位置function mousePosition(evt) {var xPos, yPos;evt = evt || window.event;if (evt.pageX) {xPos = evt.pageX;yPos = evt.pageY;} else {xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;}return {x: xPos,y: yPos};}


0 0
原创粉丝点击