写道
http://blog.csdn.net/notlikegaoshou/article/details/6562636
http://zhidao.baidu.com/link?url=ePDc5C8v-kcewgZty7w_seg2kfkwU_zYxVJzoQgjYGcuo8yUPMZoIv0l4ndX2PbqRUe8I0Wur2pxb0cgULvsnLKs9bVPsBdVAp8kkwIYi2_
http://zhidao.baidu.com/link?url=ePDc5C8v-kcewgZty7w_seg2kfkwU_zYxVJzoQgjYGcuo8yUPMZoIv0l4ndX2PbqRUe8I0Wur2pxb0cgULvsnLKs9bVPsBdVAp8kkwIYi2_
写道
为了实现纯js编写的div拖拽的功能,在网上找了一些资料但是还是感觉没有说到点子上去
个人觉得div的拖拽需要三个主要的事件
1.onmousedown鼠标按下事件
2.onmousemove鼠标移动事件
3.onmouseup鼠标按键抬起事件
个人觉得div的拖拽需要三个主要的事件
1.onmousedown鼠标按下事件
2.onmousemove鼠标移动事件
3.onmouseup鼠标按键抬起事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> var mouseX, mouseY; var objX, objY; var isDowm = false; //是否按下鼠标 function mouseDown(obj, e) { obj.style.cursor = "move"; objX = div1.style.left; objY = div1.style.top; mouseX = e.clientX; mouseY = e.clientY; isDowm = true; } function mouseMove(e) { var div = document.getElementById("div1"); var x = e.clientX; var y = e.clientY; if (isDowm) { div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px"; document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var y = e.clientY; var div = document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px"; div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px"; document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left; mouseX = x; rewmouseY = y; div1.style.cursor = "default"; isDowm = false; } } </script> </head> <body> <span id="span1"></span></br><span id="span2"></span></br> <div id="div1" style="background-color: Green; border: 1px solid red; height: 300px; top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)"> </div> </body> </html>
相关推荐
JS 实现 DIV 拖拽,
js实现div拖动功能 js实现div拖动功能 js实现div拖动功能 js实现div拖动功能
js实现DIV拖动布局,可以用来实现自定义桌面
很棒的用Javascript实现DIV的拖拽和添加
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
js实现div拖动动画运行轨迹效果源码.zip
javaScript实现DIV简单拖拽
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
用js+css轻松实现网页的浮动拖动窗口。
NULL 博文链接:https://wangking717.iteye.com/blog/1718422
可以实现div在页面中随意拖动
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
js实现简单div拖拽功能实例.docx
javascript实现div的拖拽 html 文件,兼容火狐 IE
一个很好用的javaScript写的小程序,可实现div的拖动、变形。解压后直接拷到程序中就可运行
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
js实现弹出div任意拖拽
vue实现页面div盒子拖拽排序功能 vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: ...