您的位置：首页 > Web前端 > JavaScript

js实现div的拖拽回复eqyun问题

2011-09-06 21:33 399 查看

这里是从别人代码里优化出来的，注释是自己注释的，有解释或理解错误的地方希望给予更正...//经测试，在从新获得焦点上没做处理，有时会出现问题

<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<!--这里的utf-8为什么不行？-->
<title>拖拽效果</title>
<style type="text/css">
body {  font-family:Verfana;
font-size:11px;
color:#333333;
}
#win {
position:absolute;
left:0px;
top:0px;
width:200px;
height:150px;
border:1px solid #000000;
background:yellow;
}
</style>
<script type="text/javascript">
var win;
var left = 0;//最好和win的位置保持一致
var top = 0;
var move = false;
window.onload = init;//
function init() {
win = document.getElementById("win");//返回id=win的对象
win.onmousedown = startDrag;
win.onmousemove = drag;
win.onmouseup = stopDrag;
}

function startDrag(event) { //当有鼠标按下事件时
event = event || window.event;// ||“或”不多解释，
var x = event.pageX || event.x;//FF中event.pageX来代表鼠标相应于文档左上角的位置，IE中event.clientX代表鼠标与ie窗口的位置，有时会有边框大小等，也要考虑进去，有一定的区别
var y = event.pageY || event.y;
left = x - left;//x-初始位置赋值为现在的位置
top = y - top;
win.style.background = "red";//设置鼠标按下事件时为红色，这个颜色的变化很好的反映了鼠标事件，个人感觉这个细节的使用是神笔
move = true;
}

function drag(event) {
if(move) {//若发生startDrag 则move=true
event = event || window.event;
var x = event.pageX || event.x;
var y = event.pageY || event.y;
win.style.left = x - left + "px";//移动的px
win.style.top = y - top + "px";
win.style.background = "blue";
if (!window.captureEvents(event)) { //firefox对于鼠标事件的捕捉为captureEvents()，ie使用的是setCapture（）函数,即下面的：
win.setCapture();
}
else {
captureEvents(event);
}
}
}

function stopDrag(event) {
event = event || window.event;
var x = event.pageX|| event.x;
var y = event.pageY || event.y;
left = x - left;
top = y - top;
win.style.background="yellow";
move = false;
if (!window.releaseEvents) {
win.releaseCapture();
}
else {
releaseEvents();
}
}
</script>
</head>
<body>
<div id="win">网页特效！</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div function ie 文档优化测试

相关文章推荐

新的分享

章节导航