怎么用JS 实现DIV 拖动

<!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>
<title>弹出层并可拖拽</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{
var oWin = document.getElementById("win");
var oLay = document.getElementById("overlay");
var oBtn = document.getElementsByTagName("button")[0];
var oClose = document.getElementById("close");
var oH2 = oWin.getElementsByTagName("h2")[0];
var bDrag = false;
var disX = disY = 0;
oBtn.onclick = function ()
{
oLay.style.display = "block";
oWin.style.display = "block"
};
oClose.onclick = function ()
{
oLay.style.display = "none";
oWin.style.display = "none"

};
oClose.onmousedown = function (event)
{
(event || window.event).cancelBubble = true;
};
oH2.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop;
this.setCapture && this.setCapture();
return false
};
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;

oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL + "px";
oWin.style.top = iT + "px";
return false
};
document.onmouseup = window.onblur = oH2.onlosecapture = function ()
{
bDrag = false;
oH2.releaseCapture && oH2.releaseCapture();
};
};
</script>
</head>
<body>
<div id="overlay"></div>
<div id="win"><h2><span id="close">×</span></h2></div>
<center><button>弹出层</button></center>
</body>
</html>

我以这个jquery为例给你说思路
<script type="text/javascript"></script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>

  <link type="text/css" rel="stylesheet" href="script7.3.css"/>
  <script type="text/javascript" src="script7.3.js"></script>
</head> <body>
   <form action="#">
    <p><label for="userName">Your name:<input type="text" size="30" id="userName" class="reqd"/></label></p>
<p><label for="passwd1">Choose a password:<input type="password" size="30" id="passwd1" class="reqd"/></label></p>
<p><label for="passwd2">Verify password:<input type="password" size="30" id="passwd2" class="reqd passwd1"/></label></p>
<p><input type="submit" value="Submit" /> <input type="reset"/></p>
   </form>
</body>
</html>
body {
color: #000;
background-color: #FFF;
}input.invalid {
background-color: #FF9;
border: 2px red inset;
}label.invalid {
color: #F00;
font-weight: bold;
}window.onload=initForms;function initForms(){
for (var i=0;i<document.forms.length ;i++ ){
document.forms[i].onsubmit=function(){return validForm();}
}
}function validForm(){
   var allGood=true;
   var allTags=document.getElementsByTagName("*");   for (var i=0;i<allTags.length ;i++ ) {
   if(!validTag(allTags[i])){
   allGood=false;
   }
   }
   return allGood;   function validTag(thisTag){
   var outClass="";
   var allClasses=thisTag.className.split(" ");    for (var j=0;j<allClasses.length ;j++ ){
   outClass+=validBasedOnClass(allClasses[j])+" ";
   }    thisTag.className=outClass;    if(outClass.indexOf("invalid")>-1){
   thisTag.focus();
if(thisTag.className=="INPUT"){
thisTag.select();
}
return false;
}
return true; function validBasedOnClass(thisClass){
var classBack="";
switch(thisClass){
case "":
        case "invalid":break;
case "reqd":
if(allGood && thisTag.value==""){
   classBack="invalid";
     }
    classBack+=thisClass;
break;
    default:
classBack+=thisClass;
}
return classBack;
}
   }
}
今天做了题JAVASCRIPT的练习，这题的效果是如果输入框为空的话，光标会定位到那文本框，然后文本框会变成不同颜色，查了很久都查不出哪里错，也实现不了效果

你有福了,我刚才刚把上边的代码给封装成了jquery的插件,你直接调用就好了,代码如下:<!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>http://hi.baidu.com/see7di/home</title>
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script><script type='text/javascript'>
(function($){
//拖拽插件,参数:id或object
$.Move = function(_this){
if(typeof(_this)=='object'){
_this=_this;
}else{
_this=$("#"+_this);
}
if(!_this){return false;} _this.css({'position':'absolute'}).hover(function(){$(this).css("cursor","move");},function(){$(this).css("cursor","default");})
_this.mousedown(function(e){//e鼠标事件
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
_this.css({'opacity':'0.3'});
$(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
_this.bind('selectstart',function(){return false;});
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
_this.css({'left':_x+"px",'top':_y+"px"});
});
}); $(document).mouseup(function(){
$(this).unbind("mousemove");
_this.css({'opacity':''});
})
};
})(jQuery)
//插件調用
$(function(){
$.Move('m1');
});
</script>
</head>
<body>
<style type='text/css'>
#m1{border:1px solid;}
</style>
<div id="m1">
<ul>
<li><a href="">菜单一</a>
<ul>
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a><ul><li><a href="">子菜单7</a></li></ul></li>
<li><a href="">子菜单3</a></li>
</ul>
</li>
<li><a href="">菜单二</a>
<ul>
<li><a href="">子菜单4</a></li>
<li><a href="">子菜单5</a></li>
<li><a href="">子菜单6</a></li>
</ul>
</li>
</ul>
</div>
</body>
</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">
<body>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<div id="img" style="position:absolute;width:200px; height:151px;left:20px;top:10px"><img src="1.jpg" border="0"></div><script language=javascript>
var cao_x;
var cao_y;
var divcao;
var isDown = false;
function display()
{ document.write("<div  id='cao1' style='position:absolute;display:none;width:200px;height:180px;font-size:12px;position:absolute;text-align:center;background-color:#ddd;' >");
  document.write("<div style='z-index:500'>");
  document.write("<table width=200 height=20 bgcolor=green  style='cursor:move;' onmousedown='mdown(event)' > ");
  document.write("<tr align=center>");
  document.write("<td align=left>按下左键可拖动</td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><br>可拖动层<br></span>");
  document.write("  </div>");
  document.write("</div>");
}
function mdown(ev)
{
    ev=ev||event;
    var x = ev.x||ev.pageX;
    var y= ev.y ||ev.pageY;
    cao_x=x-parseInt(divcao.style.left);
    cao_y=y-parseInt(divcao.style.top);
    isDown =true;
}
function caoMove(ev)  //实现层的拖移
{
    if(isDown){
        ev=ev||event;
      if(ev.button==1|| ev.button==0)
      {
        var cX=divcao.clientLeft;
        var cY=divcao.clientTop;
        var x = ev.x||ev.pageX;
        var y=  ev.y ||ev.pageY;
        x = cX+(x-cao_x);
        x= x<0 ? 0:( x>(cX=getClientWidth()-divcao.offsetWidth)?cX:x);
        y=cY+(y-cao_y);
        cY= getScrollTop();
        cY=cY<0?0:cY;
         y= y<cY ? cY :(y>(cY= cY + getClientHeight() - divcao.offsetHeight)?cY:y);        divcao.style.left=(x)+"px";
        divcao.style.top=(y)+"px";
      }
    }
}
document.onmouseup=function(){ isDown =false;};
document.onmousemove=function(e){ caoMove(e);};display();
setTimeout(function(){
divcao = document.getElementById("cao1");
divcao.style.display="";
divcao.style.left =((getClientWidth()-200)/2)+ "px";
divcao.style.top =(getClientHeight() -  divcao.offsetHeight)/2 +getScrollTop()+ "px";},500);
/********************
     * 取窗口滚动条滚动高度
     ******************/
    var getScrollTop=function ()
    {
       return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
    };
    /********************
     * 取窗口可视范围的高度
     *******************/
    var getClientHeight=function()
    {
       return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientHeight:document.documentElement.clientHeight;
    };
     /********************
     * 取窗口可视范围的宽度
     *******************/
    var getClientWidth=function()
    {
       return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientWidth:document.documentElement.clientWidth;
    };
</script>
</body>
</html>

这么多高手帮看看我同类问题呢
http://topic.csdn.net/u/20110813/08/3ec7ff63-45d3-4f22-9a68-afb1348eb4ec.html

<div   id=MoveDiv   style=position:absolute;left:200;top:50;width:100;height:300;background:blue>
<div   style=position:absolute;left:0;top:0;width:100;height:20;background:red   onmousedown=MDown(MoveDiv)>
按这里移动
</div>
</div> <script>
var  Obj= ' '
document.onmouseup=MUp
document.onmousemove=MMove function   MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
} function MMove(){
if(Obj!= ' '){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
} function MUp(){
if(Obj!= ' '){
document.all(Obj).releaseCapture();
Obj= ' ';
}
}
</script>

调试易

怎么用JS 实现DIV 拖动

解决方案 »