<!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>
<title></title>
</head>
<body>
<div style="background: #99CCFF; height: 140px; width: 180px; border: 1px solid #206100"
class="dragdiv">
</div>
<div style="background: #99CCFF; height: 140px; width: 180px; border: 1px solid #206100"
class="dragdiv">
</div>
</body>
</html>
<script type="text/javascript">
var Drag={
dragged:false,
ao:null,
dragStart:function()
{
Drag.ao=event.srcElement;
Drag.dragged=true;
Drag.ao.style.position="absolute";
Drag.ao.style.filter="alpha(opacity=70)";
Drag.ao.style.cursor="move";
Drag.ao.style.border="1px dashed red";
Drag.lastX=event.clientX; //自定义属性
Drag.lastY=event.clientY;
Drag.lastLeft=Drag.ao.offsetLeft;
Drag.lastTop=Drag.ao.offsetTop;
},
draging:function(){//判断MOUSE的位置
if(!Drag.dragged||Drag.ao==null)return;
var tX=event.clientX;
var tY=event.clientY;
Drag.ao.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.ao.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
},
dragEnd:function(){
if(!Drag.dragged)
return;
Drag.dragged=false;
Drag.ao.style.border="1px solid #206100";
Drag.ao.style.filter="";
},
init:function()
{
var dragdiv=document.getElementsByTagName('div');
for(var i=0;i<dragdiv.length;i++)
{
if(dragdiv[i].className=="dragdiv")
{
dragdiv[i].attachEvent("onmousedown",Drag.dragStart);
}
}
document.onmousemove=Drag.draging;
document.onmouseup=Drag.dragEnd;
}
};
Drag.init();
</script>
拖拽其实并不是很难的东西，可是这个我也是弄了半天才弄出来的，其中的主要原因就是坐标的问题，关于offsetTop clientX ，都是比较棘手的
Drag.ao.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.ao.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
这里我理解了好长的时间，如果没有加上parseInt(Drag.lastLeft)，则当移动的时候div初始是定位在document.body的坐上角的，然后进行拖拽，div才能按正常的轨道滑行，而加上parseInt(Drag.lastLeft)了，在div移动初始的时候会把相对于document.body的坐标也加上去了， 这样就感觉到是当前位置的移动。
分享到：
相关推荐
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
每块内容都可以拖动，并且可以任意摆放，里面包含了拖拽后的左侧/右侧DIV的id，获得后可以用ajax实现，将拖拽状态存入数据库，自己还可以根据需要生成所需要的模块，从数据库中取出模块状态，放入中间，每拖拽停止就...
简单的div在页面任意拖拽的效果，可以把div放到任意一个地方！
一个很好用的javaScript写的小程序，可实现div的拖动、变形。解压后直接拷到程序中就可运行
一个类似csdn聊天窗口的div+css+js实现(带QQ客服,可伸缩可拖拽可搁置),由于是本人自己花了不少时间才弄出来的，多要点分应该没问题吧。保证可以很好的运行，css和js没有做分离，主要是方便大家测试效果。
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
jquery.gridly是一个非常不错的可拖拽的插件，可以单击div图标在网页内平滑拖拽，用户体验很好 也可以单击颜色块，实现div的放大或者缩小，亦可以删除或者增加新的模块 使用方法简单： 1、将...
主要为大家详细介绍了vue实现div拖拽互换位置的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这个主意是鼠标拖拽动态生成！判断div不重叠喔！案列都已经实现了！这个其实就是一个功能的模块来做的！有需要的可以下载看看！借鉴性很强！
可以实现对div进行拖拽来调整大小的功能。 代码如下: (function ($) { $.fn.dragDivResize = function () { var deltaX, deltaY, _startX, _startY; var resizeW, resizeH; var size = 20; var minSize =...
在div内实现拖拽地图的功能，可用做背景。 缺点：一个页面只能用一次。
这个Javascript脚本，可以让你随意在网页上拖拽内容，比如一个DIV或者是一个图片等等，另外，还可以用COOKIES记住每次用户拖拽后的位置。 配置网页成为可以拖拽到脚本： ...
jsPlumb的官方包，就不做多余解释，官方说明http://jsplumbtoolkit.com/apidocs/，可以用来拖拽方式实现div排列和连线，是一个绘制流程图的绝佳插件。
mouseDown时临时记下该列第一个DIV的top和最后一个DIV 下沿绝对位置，以此比较。 对于什么时候让虚线框移动到什么位置，IGoogle以前版本的处理是：找到取距离当前鼠标位置这点最近的可拖拽DIV（取最短的两点间距离）...
这是我自己制作的web页面窗体拖拽程序，从一个按钮（可以使图片，button等等，自己定）拖拽出一个DIV（也可根据自己需要修改），拖拽次数没有限制，该DIV拖拽出来后可以继续调整位置和大小，可用于库房可视化布局...
最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样 这是我最终的实现效果 还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下...
如果要实现拖拽，必须要有一个可以拖拽的标签，或者叫容器，比如上篇里面的tr就是一个拖拽的容器，那么如果要实现选择行的拖拽，那么博主的第一反应是将选中的行放到一个容器里面，比如放到一个div中，然后注册这个...
以前用原生的JS做过类似拖拽div的效果，现在按原思路改做成一个JQ的小插件，当作制作JQ插件的一个小练习，感兴趣的朋友可以了解下哈
使用svg有一段时间了,对于svg的拖动事件一直没办法解决,最后找到一个解决办法,虽然不是原创,但是对大家肯定有用(特别是跟我一样在此问题一直苦恼的童鞋),压缩包里有2个文件,一个是拖动单个元素的,一个是整体拖动的,...
主要介绍了vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下