求拖动层

要求：
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>