标签：鼠标 拖拽 当鼠标 onmousemove 事件 box1 event

拖拽

拖拽box1元素

• 拖拽的流程
  1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
  2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
  3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

//获取box1
var box1 = document. getElementById("box1");
//为box1绑定一个鼠标按下事件
//当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
box1.onmousedown = function(){
//为document绑定一个onmousemove事件
    document.onmousemove = function(event){
        event = event||window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标的坐标
        var left = event.clientX;
        var top = event.clientY;
        
        //为元素绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置onmouseup
//取消document的onmous emove事件
doc ument.onmousemove = null;
doc ument.onmouseup = null;
    //当鼠标松开时，取消对事件的捕获
box1.releaseCapture();
};
return false;
};
};

每次拖拽时，box左上角都会与鼠标对齐，所以需要进行优化

计算鼠标与box接触时的位置，与box左上角的位置，

//为box1绑定一个鼠标按下事件
//当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
box1. onm ousedown = function(event){
event = event||window.event ;
//div的偏移量鼠标.clentX -元素.offsetLeft
//div的偏移量鼠标.clentY -元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event|| window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};

当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
如果不希望发生这个行为，则可以通过return false来取消默认行为

但是，对IE8无效

标签：鼠标,拖拽,当鼠标,onmousemove,事件,box1,event
来源： https://www.cnblogs.com/wzx-blog/p/15874815.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。