实现拖拽代码

最新推荐文章于 2020-09-22 16:05:35 发布

凯凯王

最新推荐文章于 2020-09-22 16:05:35 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/fzhwk/article/details/78119086

版权

本文介绍了如何使用JavaScript实现拖拽效果。通过记录鼠标状态、鼠标和div的坐标以及偏移量，实现div元素随鼠标移动的功能。主要包括鼠标按下、移动和释放三个事件处理函数。

摘要由CSDN通过智能技术生成

/*
* 分析：
* 获取鼠标实时移动的坐标；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;
}