js拖拽代码,js拖拽教程_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

js拖拽代码,js拖拽教程

来源：未知作者：类型：文章教程点击次数：发布时间：2017-04-16 11:28:17

我爱模板网写的一个纯js的拖拽效果，其实就是鼠标滑动，设置div容器的位置。这里需要注意的是，需要获取鼠标相对于拖拽容器的偏移量，拖拽过程中，要用鼠标坐标减去鼠标相对于容器左上角的偏移值，否则的话，在拖拽中，容器左上角会跑到鼠标下面。运行下面代码查看效果：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js拖拽效果 - 我爱模板网 www.5imoban.net</title> <style> .dragBox{width:500px; height:400px; background:rgba(0,0,0,.6); position:absolute; top:20%; left:20%; border-radius:5px; border:2px solid rgba(0,0,0,1); cursor:move;} .dragBox i{display:block; position:absolute; width:50px; height:50px; border-radius:9999px; border:1px solid #000; line-height:50px; text-align:center; font-size:18px; color:#fff; font-style:normal; cursor:pointer; right:-25px; top:-25px; background:rgba(0,0,0,1); transition:all 300ms; font-family:"arial";} .dragBox i:hover{background:rgba(0,0,0,.5);} .dragBox.draging{opacity:.5;} </style> </head> <body> <div id="dragBox" class="dragBox"> <i id="closeDragBox">X</i> <h2 style="padding:20px;">我爱模板网，静态网页模板免费下载。</h2> </div> <script> var dragBox = document.getElementById("dragBox"); var pianyiX = null; var pianyiY = null; dragBox.onmousedown = function(event){ this.classList.add("draging"); //鼠标按下，加入半透明效果 var event = event || window.event; //获取容器偏移量 var offsetX = document.getElementById("dragBox").offsetLeft; var offsetY = document.getElementById("dragBox").offsetTop; //计算鼠标相对于容器的偏移，也就是鼠标距离容器左上角的水平和垂直的距离 pianyiX = event.pageX-offsetX; pianyiY = event.pageY-offsetY; } dragBox.onmouseup = dragBox.onmouseout = function(){ this.classList.remove("draging"); } dragBox.onmousemove = function(event){ var flag = this.classList.contains("draging"); if(flag){ var event = event || window.event; var x = event.pageX-pianyiX; var y = event.pageY-pianyiY; //鼠标移动不断更新容器的位置。 document.getElementById("dragBox").style.left = x+"px"; document.getElementById("dragBox").style.top = y+"px"; } } document.getElementById("closeDragBox").onclick = function(){ document.getElementById("dragBox").style.display = "none"; } </script> </body> </html>
提示：您可以先修改部分代码再运行