1、工作中遇到需要拖拽div的功能，在网上查到脚本后直接使用
代码如下：evcen.html
<!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脚本实现在页面拖动窗口的效果，类似于在windows平台的拖动窗口，效果可嘉，不妨一试。
一个兼容性非常好的Js网页DIV模块拖动代码，就JavaScript结合PHP实现的网页DIV模块拖动特效，以ajax方式拖动，先前可见于博客的管理后台，用于管理自己网站的模块排序。本拖动特效结合PHP程序，实现了拖动模块位置的...
这个Javascript脚本，可以让你随意在网页上拖拽内容，比如一个DIV或者是一个图片等等，另外，还可以用COOKIES记住每次用户拖拽后的位置。 配置网页成为可以拖拽到脚本： ...
5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select...
5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select...
/js/all.js JavaScript脚本文件 /images 图片文件 第24章（/ch24） 程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存到数据库。打开阅读RSS时，自动获取...
12，DIV层相关（拖拽、显示、隐藏、移动、增加） 13，TABLAE相关(客户端动态增加行列，模拟进度条，滚动列表等) 14，各种<object classid=>相关类，如播放器，flash与脚本互动等 16, 刷新/模拟无刷新 异步...
在网页上我们经常看到，当点击一个按钮时，弹出一个自定义窗口，并且可以随意的拖拽，从而改变其位置 使用jquery实现拖拽，则必须要jquery的文件了，实现步骤： 1、引入jquery文件 2、编写js脚本 具体代码： html...
12，DIV层相关（拖拽、显示、隐藏、移动、增加） 13，TABLAE相关(客户端动态增加行列，模拟进度条，滚动列表等) 14，各种相关类，如播放器，flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类（XMLHttp或iframe,...
内容索引:脚本资源,Ajax/JavaScript,仿Windows,窗口拖动 jsWindow 就一款纯JavaScript+CSS/DIV结合模拟的一组仿Windows窗口，修改CSS可以改变窗口风格，这组窗口都可以拖动、最大化、最小化，就像操作Windows的窗口...
12，div层相关（拖拽、显示、隐藏、移动、增加） 13，tablae相关(客户端动态增加行列，模拟进度条，滚动列表等) 14，各种相关类，如播放器，flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类（xmlhttp或iframe,...
摘要:脚本资源,jQuery,拖曳布局 jQuery拖拽布局插件，我觉得挺实用，jQuery拖动Div布局 点击最大化 弹出层等。拖动演示网页中的各个模块，可以自动变化位置，上边的按钮可以弹出一个浮动层，每一个Div模块可以最大...
12，div层相关（拖拽、显示、隐藏、移动、增加） 13，tablae相关(客户端动态增加行列，模拟进度条，滚动列表等) 14，各种<object classid=>相关类，如播放器，flash与脚本互动等 16, 刷新/模拟无刷新 异步...
一些服务可以让你的网站载入更快，比如压缩JS和CDN，但是让代码执行的更快你要做的事情。代码中很小的改动都可能对性能造成巨大的影响。快速灵活的网站和可怕的“无响应脚本”对话框可能只有几行代码的差别。这篇...
摘要:脚本资源,Ajax/JavaScript,提示层 一个可以改变大小的弹出层。拖拽右下角及四个方向均可改变层的大校，实现原理： 四个方式用了定位，按住某个方向拖动时，div会改变大校 本源码作者：智能社。
核心技术课程 HTML基础加强、css（包含Div+CSS布局）、JavaScript、Dom（事件、window对象、document对象、对话框、定时器、粘贴板、动态Dom、跨浏览器兼容性解决方案、JS压缩和CDN、Internet Explorer Developer ...