前端设计之拖拽事件
来源:互联网 发布:万户网络官网 编辑:程序博客网 时间:2024/06/06 03:38
首先 :运用了 onmousedown = “”、onmouseup =“”、onmousemove =“”;
其次:进行分析
/*
* 分析:
* 获取鼠标实时移动的坐标;m_move_x,m_move_y
* 鼠标按下时的坐标;m_down_x,m_down_y
* div的坐标;dx,dy
* 鼠标按下时,鼠标与div的偏移量;md_x,md_y
* div的新坐标;ndx,ndy
*/
最后:也可以画一张简单的分析图如下:
程序如下:
<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>
阅读全文
0 0
- 前端设计之拖拽事件
- 前端开发之事件
- 今天聊聊前端之事件
- 前端设计之特效表单
- 前端之响应式设计
- 前端设计之网页开发
- 前端设计之鼠标悬停
- 前端插件之拖拽
- 前端进阶之路:点击事件绑定
- web前端之滚动条事件
- 前端面试题之DOM事件
- Web前端工程师之布局设计
- 前端 网页设计之颜色对照表
- web-前端设计之鼠标悬停样式
- 前端设计之图片的展示
- javascript之博客前端之事件绑定以及浏览器检测
- Web前端之拖拽窗口
- 前端编程提高之旅(十五)----jquery事件
- Android自定义ViewGroup之浪漫求婚
- LED_1_0(单灯闪烁)
- 通信协议之Protocol buffer(Java篇)
- mysql设置用户名密码,存储过程,触发器
- 谈一谈今年的移动互联网寒冬
- 前端设计之拖拽事件
- 一步集成侧滑(删除)菜单,高仿QQ、IOS
- 利用RecyclerView打造炫酷滑动卡片
- 打造Android万能的软件更新库
- 原生VideoView使用总结
- Android监听网络状态的变化及实战
- 一个null引发的SharedPreferences惨案
- Android开源日志库Logger使用教程
- 掌握自定义LayoutManager之实现流式布局