Web前端之拖拽窗口
来源：互联网 发布：软件一键位安装 编辑：程序博客网 时间：2024/06/03 15:59
<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>
