求拖动层 要求:1.整个拖动层任何地方都可以拖动2.当鼠标放在拖动层里的图片上拖动是,不能有粘性;3。当拖动层里面内容为空,只有高度宽度属性时也可以拖动。牛人帮下忙哈,谢谢!!! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <HTML> <HEAD> <TITLE>标题 </TITLE> <style>.div {font: 9pt 宋体;position:absolute;}.msg {height: 500px; overflow: scroll;}th{cursor: default;background-color: blue;color: white;}</style><SCRIPT LANGUAGE="JAVASCRIPT"> function moveLayer(){ var uddiv = document.getElementById('detail'); onMsgMove(uddiv);}function onMsgMove(divObj){ var mx = event.clientX - parseInt(divObj.style.left); var my = event.clientY - parseInt(divObj.style.top); divObj.setCapture(); divObj.onmousemove = mousemove; divObj.onmouseup = mouseup; function mousemove(){ var x = event.clientX; var y = event.clientY; divObj.style.left = x - mx; divObj.style.top = y - my; } function mouseup(){ divObj.releaseCapture(); divObj.onmousemove = function(){}; divObj.mouseup = function(){}; }}</SCRIPT> </HEAD> <body><div id="detail" style="position:absolute; width:500; top:0; left:0; z-index:10;"> <table style="border: solid 1px #000000; width:500;"> <tr> <th id="detailTitle" onmousedown="moveLayer()" width="480">Title</th> <th width="20"></th> </tr> <tr> <td id="detailHTML" style="background-color: #aaaadd;" colspan="2">Text</td> </tr> </table></div></body></HTML> 这里有一系列的拖拽代码,看看有没有合适的 http://www.sharejs.com/cat-133.aspx 时间有限,未能解决FF,safari下面图片的拖动粘性问题。有朋友若有兴趣和时间不妨补充一下。<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Jquery 拖动插件</title><style type="text/css">.asfmanDrag{ width:100px; height:100px; background-color:#FFFFCC; border: #FF9900 1px solid;}#asfmanDrag{ width:400px; background-color:#FFFFCC; text-align:center; border: #FF9900 1px solid;}#DragAble{}#Handle{ width:200px; height:20px; background-color:#FFFFCC; border: #FF9900 1px solid;}#DragAbleContent{ width:200px; height:60px; background-color:#33CCFF; border:#0033FF 1px solid;}.DragAble{}.DragAble #Handle{ width:200px; height:20px; background-color:#FFFFCC; border: #FF9900 1px solid;}.DragAble #DragAbleContent{ width:200px; height:60px; background-color:#33CCFF; border:#0033FF 1px solid;}</style></head><body><li>这是一个网上一个朋友提供的Jquery拖动插件:(<a href="http://bbs.51js.com/viewthread.php?tid=75100" target="_blank">原文地址</a>)</li><div style="width:500px; height:800px; border:#0066FF 1px solid;"> <div class="asfmanDrag"></div> <div id="asfmanDrag"> <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"> </div> <div class="asfmanDrag"></div> <div id="DragAble"> <div id="Handle"></div> <div id="DragAbleContent">1 text~~</div> </div> <div class="DragAble"> <div id="Handle"></div> <div id="DragAbleContent">2 text~~</div> </div> <div class="DragAble"> <div id="Handle"></div> <div id="DragAbleContent">3 text~~</div> </div></div><div style="height:600px;border:#0066FF 1px solid; text-align:center;"> <div style="width:400px; height:400px;border:#0066FF 1px solid; text-align:left; margin-top:150px; margin-left:150px;"> <div class="asfmanDrag"></div> <div class="DragAble"> <div id="Handle"></div> <div id="DragAbleContent">2 text~~</div> </div> </div></div></body></html><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">(function(){//jquery插件:拖动元素。//原作者:prodigynonsense //修改者:Esoul// 添加了一个参数:handle,接收dom元素作为可拖动元素的手柄。//插件发布原地址:http://bbs.51js.com/viewthread.php?tid=75100//注意:不要直接给margin值,可以放在其他的容器里面设定位置。否则元素会出现跳动现象。 jQuery.extend({zIndex : 0}); jQuery.fn.extend({ asfmanDrag : function(handle,callback,func) { this.each(function(){ this.posRange = {minX:0,minY:0,maxX:(document.compatMode == "CSS1Compat"?document.documentElement.clientWidth:document.body.clientWidth),maxY:(document.compatMode == "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight)}; var oHandle = $(this).find(handle); var _this = this; function ExecuteMousedown(e){ _this.style.zIndex = $.zIndex++; _this.style.position = "absolute"; _this.drag(e,callback,func); } if(oHandle.length>0){ oHandle.mousedown(ExecuteMousedown); }else{ _this.onmousedown = ExecuteMousedown; } this.drag = function(e,callback,func) { var element = this,ev = e || window.event; ev.rScreenX = ev.screenX; ev.rScreenY = ev.screenY; var pos = $(this).offset(); element.dragConfig = {defaultX : parseInt(pos.left,10),defaultY : parseInt(pos.top,10),defaultW: parseInt($(this).width(),10),defaultH : parseInt($(this).height(),10)}; document.onmouseup = function() { element.drop(); callback && callback(); }; document.onmousemove = function(e) { var ev2 = e || window.event; if($.browser.msie&& ev2.button!=1) { return (element.drop(),callback && callback()); } var mx = element.dragConfig.defaultX + (ev2.screenX - ev.rScreenX), my = element.dragConfig.defaultY + (ev2.screenY - ev.rScreenY), pr = element.posRange,mw = element.dragConfig.defaultW,mh = element.dragConfig.defaultH; with(element.style) { /* //原作者意图使得拖动元素不会超出边界,但是在上面的例子中存在跳动问题。 left = (mx<pr.minX?pr.minX:((mx+mw)>pr.maxX?(pr.maxX-mw):mx)) + "px"; top = (my<pr.minY?pr.minY:((my+mh)>pr.maxY?(pr.maxY-mh):my)) + "px"; */ left = mx + "px"; top = my + "px"; } func && func(); return false; }; document.onselectstart = function(){return false;}; }; this.drop = function() { document.onmousemove = document.onselectstart = document.onmouseup = null; }; }); } });//使用插件: $(".asfmanDrag").asfmanDrag(); $("#asfmanDrag").asfmanDrag(); $("#DragAble").asfmanDrag("#Handle"); $(".DragAble").asfmanDrag("#Handle");})();</script> jQuery UI有个官方的拖动插件,比较强悍,我没仔细研究过,你去看看吧。http://jqueryui.com/demos/draggable/#default <script> var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于当前对象的鼠标捕捉 z=obj.style.zIndex //获取对象的z轴坐标值 //设置对象的z轴坐标值为100,确保当前层显示在最前面 obj.style.zIndex=100 x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标 y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标 down=true //布尔值,判断鼠标是否已按下,true为按下,false为未按下 } function moveit(){ //判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上 if(down&&event.srcElement==obj){ with(obj.style){ /*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/ posLeft=document.body.scrollLeft+event.x-x /*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/ posTop=document.body.scrollTop+event.y-y } } } function stopdrag(){ //onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false down=false obj.style.zIndex=z //还原对象的Z轴坐标值 obj.releaseCapture() //释放当前对象的鼠标捕捉 } </script> <div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee"><img src="http://avatar.profile.csdn.net/9/B/A/2_ldii3.jpg"></div> JavaScript如何修改table下A连接的属性值 请高手们解释一下这段代码, js 怎么判断并获取多行多列表格中 复选框被选中的 那一行的值? 关于本页数据传入输入框的问题 问一个document.execCommand('Undo')问题,有点头疼哦 改变或拿取<text>中的readonly属性. 请教:csdn的导航树问题。 这个问题有一点点的难度.看看能不能实现. 怎样使用javascript实现IE的另存为的功能。 求一个正则表达式 急,请问css的dom在javascript中的写法: 动态替换的问题
<HTML>
<HEAD>
<TITLE>标题 </TITLE>
<style>
.div {
font: 9pt 宋体;
position:absolute;
}
.msg {
height: 500px;
overflow: scroll;
}
th{
cursor: default;
background-color: blue;
color: white;
}
</style>
<SCRIPT LANGUAGE="JAVASCRIPT">
function moveLayer(){
var uddiv = document.getElementById('detail');
onMsgMove(uddiv);
}function onMsgMove(divObj){
var mx = event.clientX - parseInt(divObj.style.left);
var my = event.clientY - parseInt(divObj.style.top);
divObj.setCapture();
divObj.onmousemove = mousemove;
divObj.onmouseup = mouseup;
function mousemove(){
var x = event.clientX;
var y = event.clientY;
divObj.style.left = x - mx;
divObj.style.top = y - my;
}
function mouseup(){
divObj.releaseCapture();
divObj.onmousemove = function(){};
divObj.mouseup = function(){};
}
}
</SCRIPT> </HEAD>
<body><div id="detail" style="position:absolute; width:500; top:0; left:0; z-index:10;">
<table style="border: solid 1px #000000; width:500;">
<tr>
<th id="detailTitle" onmousedown="moveLayer()" width="480">Title</th>
<th width="20"></th>
</tr>
<tr>
<td id="detailHTML" style="background-color: #aaaadd;" colspan="2">Text</td>
</tr>
</table>
</div>
</body>
</HTML>
http://www.sharejs.com/cat-133.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 拖动插件</title>
<style type="text/css">
.asfmanDrag{
width:100px;
height:100px;
background-color:#FFFFCC;
border: #FF9900 1px solid;
}#asfmanDrag{
width:400px;
background-color:#FFFFCC;
text-align:center;
border: #FF9900 1px solid;
}
#DragAble{}
#Handle{
width:200px;
height:20px;
background-color:#FFFFCC;
border: #FF9900 1px solid;
}
#DragAbleContent{
width:200px;
height:60px;
background-color:#33CCFF;
border:#0033FF 1px solid;
}
.DragAble{}
.DragAble #Handle{
width:200px;
height:20px;
background-color:#FFFFCC;
border: #FF9900 1px solid;
}.DragAble #DragAbleContent{
width:200px;
height:60px;
background-color:#33CCFF;
border:#0033FF 1px solid;
}
</style>
</head>
<body>
<li>这是一个网上一个朋友提供的Jquery拖动插件:(<a href="http://bbs.51js.com/viewthread.php?tid=75100" target="_blank">原文地址</a>)</li>
<div style="width:500px; height:800px; border:#0066FF 1px solid;">
<div class="asfmanDrag"></div>
<div id="asfmanDrag">
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">
</div>
<div class="asfmanDrag"></div>
<div id="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">1 text~~</div>
</div>
<div class="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">2 text~~</div>
</div>
<div class="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">3 text~~</div>
</div>
</div>
<div style="height:600px;border:#0066FF 1px solid; text-align:center;">
<div style="width:400px; height:400px;border:#0066FF 1px solid; text-align:left; margin-top:150px; margin-left:150px;">
<div class="asfmanDrag"></div>
<div class="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">2 text~~</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
(function(){
//jquery插件:拖动元素。
//原作者:prodigynonsense
//修改者:Esoul
// 添加了一个参数:handle,接收dom元素作为可拖动元素的手柄。
//插件发布原地址:http://bbs.51js.com/viewthread.php?tid=75100
//注意:不要直接给margin值,可以放在其他的容器里面设定位置。否则元素会出现跳动现象。
jQuery.extend({zIndex : 0});
jQuery.fn.extend({
asfmanDrag : function(handle,callback,func)
{
this.each(function(){
this.posRange = {minX:0,minY:0,maxX:(document.compatMode == "CSS1Compat"?document.documentElement.clientWidth:document.body.clientWidth),maxY:(document.compatMode == "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight)};
var oHandle = $(this).find(handle);
var _this = this;
function ExecuteMousedown(e){
_this.style.zIndex = $.zIndex++;
_this.style.position = "absolute";
_this.drag(e,callback,func);
}
if(oHandle.length>0){
oHandle.mousedown(ExecuteMousedown);
}else{
_this.onmousedown = ExecuteMousedown;
}
this.drag = function(e,callback,func)
{
var element = this,ev = e || window.event;
ev.rScreenX = ev.screenX;
ev.rScreenY = ev.screenY;
var pos = $(this).offset();
element.dragConfig = {defaultX : parseInt(pos.left,10),defaultY : parseInt(pos.top,10),defaultW: parseInt($(this).width(),10),defaultH : parseInt($(this).height(),10)};
document.onmouseup = function()
{
element.drop();
callback && callback();
};
document.onmousemove = function(e)
{
var ev2 = e || window.event;
if($.browser.msie&& ev2.button!=1)
{
return (element.drop(),callback && callback());
}
var mx = element.dragConfig.defaultX + (ev2.screenX - ev.rScreenX),
my = element.dragConfig.defaultY + (ev2.screenY - ev.rScreenY),
pr = element.posRange,mw = element.dragConfig.defaultW,mh = element.dragConfig.defaultH;
with(element.style)
{
/* //原作者意图使得拖动元素不会超出边界,但是在上面的例子中存在跳动问题。
left = (mx<pr.minX?pr.minX:((mx+mw)>pr.maxX?(pr.maxX-mw):mx)) + "px";
top = (my<pr.minY?pr.minY:((my+mh)>pr.maxY?(pr.maxY-mh):my)) + "px";
*/
left = mx + "px";
top = my + "px";
}
func && func();
return false;
};
document.onselectstart = function(){return false;};
};
this.drop = function()
{
document.onmousemove = document.onselectstart = document.onmouseup = null;
};
});
}
});//使用插件:
$(".asfmanDrag").asfmanDrag();
$("#asfmanDrag").asfmanDrag();
$("#DragAble").asfmanDrag("#Handle");
$(".DragAble").asfmanDrag("#Handle");
})();
</script>
http://jqueryui.com/demos/draggable/#default
var x,y,z,down=false,obj
function init(){
obj=event.srcElement //事件触发对象
obj.setCapture() //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex //获取对象的z轴坐标值
//设置对象的z轴坐标值为100,确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true //布尔值,判断鼠标是否已按下,true为按下,false为未按下
} function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(down&&event.srcElement==obj){
with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/ posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-y
}
}
} function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
down=false
obj.style.zIndex=z //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}
</script>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">
<img src="http://avatar.profile.csdn.net/9/B/A/2_ldii3.jpg">
</div>