谁有关于图层拖动的代码啊?急!急!急! 谁有关于图层拖动的代码啊?现在我要实现一个图层的拖动功能,不知道该怎么实现。求一段图层拖动的代码,或者给个思路也行啊!!!谢谢了!!! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 jquery + jqDnRhttp://dev.iceburg.net/jquery/jqDnR/ http://www.cnblogs.com/osccur123/articles/1190943.html http://topic.csdn.net/u/20090422/16/2a75c450-0fbf-4ab5-95e0-eeb94fb25ad9.html2楼 基本每个对象都可以拖动,这里有一个例子:http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx,而且代码封装的很好,只要传递一个元素的id给function就可以。 <html> <head> <title>Drag</title> <style type="text/css"> </style> <script type="text/javascript"> var t=10; function change(){ t++; window.status=t; } var Drag = { //当前被drag的对象 obj: null, //初始化 init: function(id){ var o = document.getElementById(id); //当onmousedown开始拖拽 o.onmousedown = Drag.start; }, start: function(e){ var o = Drag.obj = this; //lastMouseX,lastMouseY记录上次鼠标的位置 o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; //当onmousemove开始移动 document.onmousemove = Drag.move; //当onmouseup终止拖拽 document.onmouseup = Drag.end; }, move: function(e){ var o = Drag.obj; //dx, dy表示鼠标移动的距离 var dx = Drag.getEvent(e).x - o.lastMouseX; var dy = Drag.getEvent(e).y - o.lastMouseY; //因为element.style.left通常返回的结果是'200px'的形式,所以要用parseInt转化 var left = parseInt(o.style.left) + dx ; var top = parseInt(o.style.top) + dy; o.style.left = left; o.style.top = top; o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; }, end: function(e){ document.onmousemove = null; document.onMouseup = null; Drag.obj = null; }, //辅助函数,处理IE和FF不同的event模型 getEvent: function(e){ if (typeof e == 'undefined'){ e = window.event; } //alert(e.x?e.x : e.layerX); if(typeof e.x == 'undefined'){ e.x = e.pageX;//复制了n遍,到了csdn就变成ee.x了 } if(typeof e.y == 'undefined'){ e.y = e.pageY;//复制了n遍,到了csdn就变成ee.x了 } return e; } }; </script> </head> <body> <div id="div1" style="position:absolute; left:30px; top:30px;width:200px; height:200px; background-color:#666666;" onmousemove="change();"></div> <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div> <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div> <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div> </body> <script type="text/javascript"> //测试代码开始,使三个div具有drag and drop的能力。 Drag.init('r'); Drag.init('g'); Drag.init('b'); </script> </html> 上面的代码在小的DIV在大的DIV上面移动时不能触发大的DIV的onmousemove事件,貌似也不能触发大的DIV的其它事件。怎样才能触发大的DIV的事件呢。前提是不能使用大的DIV去包含小的DIV。谁知道啊? 我这里有个用鼠标拖动层的方法 你看要不要 <script language="javascript" type="text/javascript">function startMove(objDiv){ document.attachEvent("onmousemove",moveDiv); document.attachEvent("onmouseup",endMove); document.attachEvent("onselectstart",selectNo); document["moveDiv"] = objDiv; document["startX"] = event.x; document["startY"] = event.y; document["oldX"] = objDiv.getBoundingClientRect().left; document["oldY"] = objDiv.getBoundingClientRect().top;}function moveDiv(){ var obj = document["moveDiv"]; if(obj) { var l = document["oldX"]; var t = document["oldY"]; obj.style.position = "absolute"; obj.style.left = l + (event.x-document["startX"]); obj.style.top = t + (event.y-document["startY"]); }}function endMove(){ document.detachEvent("onmousemove",moveDiv); document.detachEvent("onmouseup",endMove); document.detachEvent("onselectstart",selectNo); document["moveDiv"] = null; document["startX"] = null; document["startY"] = null;}function selectNo(){ return false; }</script> 我测试了你的code,外面的div可以响应onmousemove. 不知道你的为什么不可以,你用什么浏览器? 外面的div可以响应onmousemove?我的意思是最大的那一个灰色背景的div。外面的div是哪一个啊? 使用mootools框架new Drag.Move($('需要拖动的那个玩意的id'),{handle:$('拖动的把手的id,比如标题栏啦之类的,可不要')});拖动有时候就是这么简单 js 时间格式调试方面的错误,求分析解答 关于滚动条拖动影响坐标的问题,高手进~~~ js 小问题! javascript里面 如何比较中文字符串? 使用yui的treeview生成一个权限列表分配页面,提交后如何获取数据呢? 帮忙啊 大神,教教我这是为什么。 请问哪里有Microsoft Script Debuger下载啊?我在网上搜了半天还是没找到! 这段代码如何改写成javascript? ext3.3.0奇葩问题 js验证问题 js调试数组,每次得到的值都是object
http://dev.iceburg.net/jquery/jqDnR/
2楼
这里有一个例子:
http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx,
而且代码封装的很好,
只要传递一个元素的id给function就可以。
<html>
<head>
<title>Drag</title>
<style type="text/css">
</style>
<script type="text/javascript">
var t=10;
function change(){
t++;
window.status=t;
}
var Drag = {
//当前被drag的对象
obj: null,
//初始化
init: function(id){
var o = document.getElementById(id);
//当onmousedown开始拖拽
o.onmousedown = Drag.start;
},
start: function(e){
var o = Drag.obj = this;
//lastMouseX,lastMouseY记录上次鼠标的位置
o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
//当onmousemove开始移动
document.onmousemove = Drag.move;
//当onmouseup终止拖拽
document.onmouseup = Drag.end;
},
move: function(e){
var o = Drag.obj;
//dx, dy表示鼠标移动的距离
var dx = Drag.getEvent(e).x - o.lastMouseX;
var dy = Drag.getEvent(e).y - o.lastMouseY;
//因为element.style.left通常返回的结果是'200px'的形式,所以要用parseInt转化
var left = parseInt(o.style.left) + dx ;
var top = parseInt(o.style.top) + dy;
o.style.left = left;
o.style.top = top; o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
},
end: function(e){
document.onmousemove = null;
document.onMouseup = null;
Drag.obj = null;
},
//辅助函数,处理IE和FF不同的event模型
getEvent: function(e){
if (typeof e == 'undefined'){
e = window.event;
}
//alert(e.x?e.x : e.layerX);
if(typeof e.x == 'undefined'){
e.x = e.pageX;//复制了n遍,到了csdn就变成ee.x了
}
if(typeof e.y == 'undefined'){
e.y = e.pageY;//复制了n遍,到了csdn就变成ee.x了
}
return e;
}
};
</script>
</head>
<body>
<div id="div1" style="position:absolute; left:30px; top:30px;width:200px; height:200px; background-color:#666666;" onmousemove="change();"></div>
<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div>
<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div>
<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div>
</body>
<script type="text/javascript">
//测试代码开始,使三个div具有drag and drop的能力。
Drag.init('r');
Drag.init('g');
Drag.init('b');
</script>
</html> 上面的代码在小的DIV在大的DIV上面移动时不能触发大的DIV的onmousemove事件,貌似也不能触发大的DIV的其它事件。
怎样才能触发大的DIV的事件呢。前提是不能使用大的DIV去包含小的DIV。
谁知道啊?
function startMove(objDiv)
{
document.attachEvent("onmousemove",moveDiv);
document.attachEvent("onmouseup",endMove);
document.attachEvent("onselectstart",selectNo);
document["moveDiv"] = objDiv;
document["startX"] = event.x;
document["startY"] = event.y;
document["oldX"] = objDiv.getBoundingClientRect().left;
document["oldY"] = objDiv.getBoundingClientRect().top;
}
function moveDiv()
{
var obj = document["moveDiv"];
if(obj)
{
var l = document["oldX"];
var t = document["oldY"];
obj.style.position = "absolute";
obj.style.left = l + (event.x-document["startX"]);
obj.style.top = t + (event.y-document["startY"]);
}
}
function endMove()
{
document.detachEvent("onmousemove",moveDiv);
document.detachEvent("onmouseup",endMove);
document.detachEvent("onselectstart",selectNo);
document["moveDiv"] = null;
document["startX"] = null;
document["startY"] = null;
}
function selectNo()
{
return false;
}
</script>
我的意思是最大的那一个灰色背景的div。外面的div是哪一个啊?