鼠标拖拽-网络技术交流

首页 / 站长交流区 / 网络技术交流

鼠标拖拽
2020-12-01 10:00: <div style="width:200;height:50;background-color:#FFFF66;"></div>
<div style="width:200;height:50;background-color:#CCFFFF;"></div>
<script>
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
ev = ev || window.event;

var docPos    = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
var left = 0;
var top = 0;

while (e.offsetParent){
      left += e.offsetLeft;
      top += e.offsetTop;
      e    = e.offsetParent;
}

left += e.offsetLeft;
top += e.offsetTop;

return {x:left, y:top};
}

function mouseMove(ev){
ev          = ev || window.event;
var mousePos = mouseCoords(ev);
makeDraggable(ev.srcElement || ev.target)
if(dragObject){

      dragObject.style.position = 'absolute';
      dragObject.style.top    = mousePos.y - mouseOffset.y;
      dragObject.style.left    = mousePos.x - mouseOffset.x;

      return false;
}
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
}
return {
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseUp(){
dragObject = null;
}

function makeDraggable(item){
if( item.tagName != ( "DIV" || "IMG" )) return;
item.onmousedown = function(ev){
      dragObject = this;
      mouseOffset = getMouseOffset(this, ev);
      return false;
}
}
</script>; 3607 次浏览 0 条评论收藏

说说我的看法

登录后可以发表评论登录

作者信息

: 关注

20: 贴子

0: 粉丝

热门贴子

: 我的收藏

: 我的关注

鼠标拖拽

说说我的看法

微信扫码到手机端分享

登录

申请试用