<html>
<head>
<style type="text/css">
.divBody{
//margin-top:20px;
border: solid #CCC 1px;
width:500px;
height:400px;
position:relative;
z-index:0;
margin-left:auto;
margin-right:auto;
}
.divHead{
width:500px;
height:30px;
background-color:#0000FF;
}
.content
{
width:500px;
height:340px;
}
.tail{
background:#CCC;
height:30px;
width:500px;
display:table-cell;
vertical-align:middle;
}
</style >
</head>
<body>
<div class="divBody" id="divBody" style="left: 29px; top: 14px;"> <!--这里要加style="left: 29px; top: 14px;" 否则有问题-->
<div class="divHead" id="divHead" style="cursor: move;"></div>
<div class="content"></div>
<div class="tail"></div>
</div>
<script type="text/javascript">
var posX;
var posY;
fdiv = document.getElementById("divBody");
document.getElementById("divHead").onmousedown=function(e)
{
if(!e) e = window.event; //IE
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function()
{
document.onmousemove = null;
}
function mousemove(ev)
{
if(ev==null) ev = window.event;//IE
fdiv.style.left = (ev.clientX - posX) + "px";
fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>
</body>
</html>
分享到：
相关推荐
JS实现鼠标拖动div移动(附效果演示)
javascript实现鼠标拖动div的效果。。。
鼠标拖动DIV，DIV移动后加载后台JSON数据
jQuery鼠标拖动div层排序代码是一款简单的div容器li标签拖拽排序功能，鼠标按住上下拖动改变排列顺序。
原生js实现鼠标拖动div
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
可以用鼠标拖动的DIV1
jquery编写HTML 鼠标可拖动层DIv 整理源代码。比网络上的其他鼠标拖动效果比较小巧，结构清楚，没有那么多花里胡哨的垃圾代码。
鼠标拖动元素框架有样例 ,解压后进入直接就能运行
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
鼠标拖动(js封装类,javascript,鼠标拖动,drag,div)
1、html 拖动div进行相应顺序的排序，亲测可用，简单方便 2、适用于各大场景，通过相应的js拖动来执行相应的方法 3、可以下载应用，不懂的可以一起探讨
jQuery鼠标上下拖动div排序代码、鼠标拖动层改变排列顺序，div左上角还有按钮操作，点击只是弹窗提示效果。
jQuery鼠标拖动上下层排序代码基于jquery-1.11.0.min.js制作，鼠标拖动DIV层排序。
js div拖动动画运行轨迹效果代码是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码。
鼠标拖动 ; charset=gb2312" /> var drag_=false var D=new Function('obj','return document.getElementById(obj);') var oevent=new Function('e','if (!e) e = window.event;return e') function Move_...
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
鼠标拖动div图层。可用来做咱们小窗口的布局。