html 鼠标拖拽事件,JavaScript鼠标拖拽事件实现的案例

这篇文章主要为大家详细介绍了使用javaScript实现鼠标拖拽事件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现鼠标拖拽事件的具体代码，供大家参考，具体内容如下

body{

margin: 0;

padding: 0;

}

p{

position: absolute;

top: 200px;/*p的y轴*/

left: 150px;/*p的x轴*/

width: 300px;

height: 200px;

background-color: gray;

}

p:hover{

cursor: move;

}

/*

* 分析：

* 获取鼠标实时移动的坐标；m_move_x,m_move_y

* 鼠标按下时的坐标；m_down_x,m_down_y

* p的坐标；dx,dy

* 鼠标按下时，鼠标与p的偏移量；md_x,md_y

* p的新坐标；ndx,ndy

*/

var isDown = false;//记录鼠标状态

var move_p ;//要操作的p对象

var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

//鼠标按下

function down(){

move_p = document.getElementById("move_p");

isDown = true;

//获取鼠标按下时坐标

m_down_x = event.pageX;

m_down_y = event.pageY;

//获取p坐标

dx = move_p.offsetLeft;

dy = move_p.offsetTop;

//获取鼠标与p偏移量

md_x = m_down_x - dx;

md_y = m_down_y - dy;

}

//鼠标移动

function move(){

move_p = document.getElementById("move_p");

//实时更新p的坐标

dx = move_p.offsetLeft;

dy = move_p.offsetTop;

//获取鼠标移动实时坐标

m_move_x = event.pageX;

m_move_y = event.pageY;

//鼠标按下时移动才触发

if(isDown){

//获取新p坐标，鼠标实时坐标 - 鼠标与p的偏移量

ndx = m_move_x - md_x;

ndy = m_move_y - md_y;

//把新p坐标值赋给p对象

move_p.style.left = ndx+"px";

move_p.style.top = ndy+"px";

}

}

//鼠标释放

function up(){

isDown = false;

}