使用javaScript实现鼠标拖拽事件
2017-09-27 14:54
1091 查看
本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下
<html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 300px; height: 200px; background-color: gray; } div:hover{ cursor: move; } </style> <script> /* * 分析: * 获取鼠标实时移动的坐标;m_move_x,m_move_y * 鼠标按下时的坐标;m_down_x,m_down_y * div的坐标;dx,dy * 鼠标按下时,鼠标与div的偏移量;md_x,md_y * div的新坐标;ndx,ndy */ var isDown = false;//记录鼠标状态 var move_div ;//要操作的div对象 var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy; //鼠标按下 function down(){ move_div = document.getElementById("move_div"); isDown = true; //获取鼠标按下时坐标 m_down_x = event.pageX; m_down_y = event.pageY; //获取div坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标与div偏移量 md_x = m_down_x - dx; md_y = m_down_y - dy; } //鼠标移动 function move(){ move_div = document.getElementById("move_div"); //实时更新div的坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标移动实时坐标 m_move_x = event.pageX; m_move_y = event.pageY; //鼠标按下时移动才触发 if(isDown){ //获取新div坐标,鼠标实时坐标 - 鼠标与div的偏移量 ndx = m_move_x - md_x; ndy = m_move_y - md_y; //把新div坐标值赋给div对象 move_div.style.left = ndx+"px"; move_div.style.top = ndy+"px"; } } //鼠标释放 function up(){ isDown = false; } </script> </head> <body> <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用js中常用的鼠标事件实现一个拖拽的例子
- 使用Javascript封装实现屏蔽鼠标右键系统键菜单,并绑定自定义的事件
- javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
- javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
- 用Javascript实现鼠标拖拽网页表单 (二)
- 用Javascript实现鼠标拖拽网页表单
- 用Javascript实现网页表单鼠标拖拽
- 用Javascript实现鼠标拖拽网页表单[转]
- 用Javascript实现鼠标拖拽网页表单(4)
- 在MVVM中使用AttachedDependencyProperty,实现鼠标双击listviewitem事件
- javascript事件列表大全解说,点击事件,双击事件,触发事件,键盘事件,鼠标移动事件,javaScript事件使用小全
- [转]用Javascript实现鼠标拖拽网页表单
- 使用javascript实现拖拽效果
- JavaScript中通过鼠标事件实现模拟拖放效果
- 用Javascript实现鼠标拖拽网页表单(2)
- [转]用Javascript实现鼠标拖拽网页表单
- Javascript实现图片位置控制(鼠标拖拽 + 键盘方向键移动)源码分享
- 用Javascript实现鼠标拖拽网页表单 (二)
- 超酷的鼠标拖拽翻页(分页)效果实现javascript代码