JS拖放DIV如何只允许在这个范围内的呢

<html>
<head>
<title>移动Div</title>
<style type="text/css" rel="stylesheet">
   #movediv{
    width:100px;height:100px;position:absolute;border:1px solid #000;background:#EAEAEA;
    cursor:pointer;
    text-align:center;
    line-height:100px;
    left:100px;
    top:10px;
   }
</style>
<script language="javascript" type="text/javascript">
   var _IsMousedown = 0;
   var _ClickLeft = 0;
   var _ClickTop = 0;
   function moveInit(divID,evt)
   {
    _IsMousedown = 1;
    if(getBrowserType() == "NSupport")
    {
     return;
    }
    var obj = getObjById(divID);
    if(getBrowserType() == "fox")
    {
     _ClickLeft = evt.pageX - parseInt(obj.style.left);
     _ClickTop = evt.pageY - parseInt(obj.style.top);
    }else{
     _ClickLeft = evt.x - parseInt(obj.style.left);
     _ClickTop = evt.y - parseInt(obj.style.top);
    }
   }
   function Move(divID,evt)
   {
    if(_IsMousedown == 0)
    {
     return;
    }
    var objDiv = getObjById(divID);
    if(getBrowserType() == "fox")
    {
     objDiv.style.left = evt.pageX - _ClickLeft;
     objDiv.style.top = evt.pageY - _ClickTop;
    }
    else{
     objDiv.style.left = evt.x - _ClickLeft;
     objDiv.style.top = evt.y - _ClickTop;
    }
    
   }
   function stopMove()
   {
    _IsMousedown = 0;
   }
   function getObjById(id)
   {
    return document.getElementById(id);
   }
   function getBrowserType()
   {
    var browser=navigator.appName
    var b_version=navigator.appVersion
    var version=parseFloat(b_version)
    //alert(browser);
    if ((browser=="Netscape"))
    {
     return "fox";
    }
    else if(browser=="Microsoft Internet Explorer")
    {
     if(version>=4)
     {
      return "ie4+";
     }
     else
     {
      return "ie4-";
     }
    }
    else
    {
     return "NSupport";
    }
   }
</script>
</head>
<body>
<div id="movediv" style="left:20px;top:20px; z-index:5;" onmousedown="moveInit('movediv',event);" onmousemove="Move('movediv',event)" onmouseup="stopMove()" onmouseout="stopMove()">move</div>
<div id="movediv1" style="position:absolute;left:120px;top:120px;z-index:5; width:80px; height:80px; background-color:Blue; cursor:move;" onmousedown="moveInit('movediv1',event);" onmousemove="Move('movediv1',event)" onmouseup="stopMove()" onmouseout="stopMove()">move1</div>
<div id="main" style="position:absolute;left:420px;top:100px; width:480px; height:480px; background-color:Gray;z-index:0;">
     只允许在这个范围内拖放
</div>
</body>
</html>JS拖放DIV如何只允许在这个范围内的呢  只能在id="main"  的DIV拖放 该如何的呢？

解决方案 »

  1.   

    你把事件注册到id="main"的DIV上呗
      

  2.   

    拖放的时候，判断下当前鼠标的x、y
    其中会涉及到算法，判断鼠标x、y 和div的宽度、高度结合起来判断的
    当然也可以用插件
      

  3.   

    你把事件注册到id="main"的DIV上呗  这个代码也网上搜到的了。 
    我去试看看。 
    懂的 可以帮我改下。 谢谢了
      

  4.   

    一楼正解，另附我以前做的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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
         .divDemo{
    border:#00C solid 1px;
    padding:10px;
    display:inline;
    float:left;
    }
    #divBody{
    windth:800px;
    height:800px;
    border:#00F solid 1px;
    }
    #divShow{
    border:#F00 solid 1px;
    position:absolute;
    }
        </style>
        <script type="text/javascript">
         var x = 0;
    var y = 0;
    function down(event){
    document.getElementById('divBody').innerHTML = "";
    var evt = event || window.event;
    document.getElementById('divBody').setAttribute('onmousemove','showDiv(event)');
    x = evt.clientY;
    y = evt.clientX;
    }
    function showDiv(event){
    var evt = event || window.event;
    if(x != 0 && y != 0 && (evt.clientX - y) >= 0 && (evt.clientY - x) >= 0){
    var divShow = document.createElement('div');
    divShow.id = "divShow";
    divShow.style.top = x;
    divShow.style.left = y;
    divShow.style.width = (evt.clientX - y) + "px";
    divShow.style.height = (evt.clientY - x) + "px";
    document.getElementById('divBody').innerHTML = "";
    document.getElementById('divBody').appendChild(divShow);
    }
    else{
    x = 0;
    y = 0;
    document.getElementById('divBody').innerHTML = "";
    }
    return false;
    }
    function paintDiv(event){
    var evt = event || window.event;
    if(x != 0 && y != 0 && (evt.clientX - y) > 0 && (evt.clientY - x) > 0){
    var divShow = document.createElement('div');
    divShow.id = "divShow";
    divShow.style.top = x + "px";
    divShow.style.left = y + "px";
    divShow.style.width = (evt.clientX - y) + "px";
    divShow.style.height = (evt.clientY - x) + "px";
    document.getElementById('divBody').innerHTML = "";
    document.getElementById('divBody').appendChild(divShow);
    document.getElementById('divBody').setAttribute('onmousemove','');
    x = 0;
    y = 0;
    }
    else{
    x = 0;
    y = 0;
    document.getElementById('divBody').innerHTML = "";
    }
    }
        </script>
    </head>
    <body>
        <div id="divBody" onmousedown="down(event)" onmouseup="paintDiv(event)"></div>
    </body>
    </html>
      

  5.   

    刚才写了一个简单的JS拖拽，你可以粘下去看看：
    <!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>无标题文档</title>
    <style type="text/css">
         #divFloat{
    position:absolute;
    top:200px;
    left:200px;
    width:300px;
    height:200px;
    background:#CCC;
    }
        </style>
        <script type="text/javascript">
         var x = 200;
    var y = 200;
    var m = 0;
    var n = 0;
    function xuanzhong(event){
    var evt = event || window.event;
    m = evt.clientY - x;
    n = evt.clientX - y;
    document.getElementById('divFloat').setAttribute("onmousemove","tuozhuai(event)");
    }
    function tuozhuai(event){
    var evt = event || window.event;
    document.getElementById('divFloat').style.top = evt.clientY - m +　"px";
    document.getElementById('divFloat').style.left = evt.clientX - n + "px";
    }
    function jieshu(event){
    var evt = event || window.event;
    x = evt.clientY - m;
    y = evt.clientX - n;
    document.getElementById('divFloat').setAttribute("onmousemove","");
    }
        </script>
    </head>
    <body>
    <div id="divFloat" onmousedown="xuanzhong(event)" onmouseup="jieshu(event)">
         这是一个位置不固定的DIV！
        </div>
    </body>
    </html>
      

  6.   

    简单的JS拖拽 谢谢你 但我这个也有这个代码了。 我想要在 固定范围的。
    谢谢 你们的回答了。 我总于找到了一个
    <style> .dragArea{
    /*background-color:blue;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;*/
    border:1px solid #CCCCCC;
    } body{
    margin:0px;
    }
    </style>
    <body>
    <div style="top:100px;left:200px;width:100px;height:100px;position:absolute;background:black;" onselectstart="return false;" 
    onmousedown="mousedown.apply(this,arguments);">
    </div>
    </body>
    <script type="text/javascript">
    /*********************************************************************** 
     * 函数名：startdrag
     * 说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。
     * 参数：
     * parent DOM对象，拖动所属的父对象，必需是容器，可以为document.body
     * onmove 函数对象，事件，拖动开始后，鼠标移动触发事件
     * onfinish 函数对象，事件，拖动结束时，触发事件一次
     * area 对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范围。
     ***********************************************************************/ function startdrag(parent,onmove,onfinish,area)
    {
    var up,out,over; var divarea=document.createElement("div");
    if(!area)area={
    /*"top":"0px",
    "left":"0px",
    "width":"100%",
    "height":"100%"*/
    "top":"80px",
    "left":"100px",
    "width":"500px",
    "height":"500px"
    }
    divarea.style.position="absolute";
    divarea.style.top=area.top;
    divarea.style.left=area.left;
    divarea.style.width=area.width;
    divarea.style.height=area.height;
    divarea.style.overflow="hidden";
    divarea.style.zIndex="10000";
    divarea.className="dragArea";
    parent.appendChild(divarea);
    if(divarea.attachEvent)
    {
    divarea.attachEvent("onmousemove",onmove)
    document.attachEvent("onmouseup",up=function(){
    divarea.detachEvent("onmousemove",onmove);
    document.detachEvent("onmouseup",up);
    divarea.detachEvent("onmouseout",out);
    parent.removeChild(divarea);
    onfinish(event||arguments[0]);
    });
    divarea.attachEvent("onmouseout",out=function(){
    divarea.detachEvent("onmousemove",onmove);
    document.detachEvent("onmouseup",up);
    divarea.detachEvent("onmouseout",out);
    parent.removeChild(divarea);
    onfinish(event||arguments[0]); });
    } else if(divarea.addEventListener)
    {
    divarea.addEventListener("mousemove",onmove,true);
    document.addEventListener("mouseup",up=function(){
    divarea.removeEventListener("mousemove",onmove,true);
    document.removeEventListener("mouseup",up,true);
    divarea.removeEventListener("mouseout",out,true);
    parent.removeChild(divarea);
    onfinish(event||arguments[0]);
    },true);
    divarea.addEventListener("mouseout",out=function(){
    //alert("out");
    divarea.removeEventListener("mousemove",onmove,true);
    document.removeEventListener("mouseup",up,true);
    divarea.removeEventListener("mouseout",out,true);
    parent.removeChild(divarea);
    onfinish(event||arguments[0]);
    },true);
    } }
    </script>
    <script type="text/javascript">
    function mousedown()
    {
    var e=arguments[0]||event;
    var me=this;
    var dy=e.clientY-parseInt(me.style.top);
    var dx=e.clientX-parseInt(me.style.left);
    startdrag(
    document.body,
    function(e){
    e=e||event;
    if(e.clientY-dy<0||e.clientY-dy>parseInt(document.body.clientHeight)-100)return;
    if(e.clientX-dx<0||e.clientX-dx>parseInt(document.body.clientWidth)-100)return;
    me.style.top=e.clientY-dy;
    me.style.left=e.clientX-dx;
    },
    function(e){
    }
    );
    }
    </script>