请教个javascript移动div的问题！

如何用javascript实现div在特定div中的移动，当然不能移出该特定div的范围！并且得到相对于该特定div的相对坐标！谢谢！
本人对javascript不是很熟悉，希望高手帮小弟解决下！

解决方案 »

  1.   

    直接在外面的DIV中写iframe，然后就移不出来了，里面相对于页面的位置就是相对位置了
      

  2.   

    <html>
    <head>
    <style type="text/css">
    body {
    margin:0px;
    height:100%;
    }
    #wc_title {
    width:100px;
    height:20px;
    background-color:#DCE2F1;
    margin-bottom:5px;
    cursor:move;
    }
    #wc {
    z-index:100;
    position:absolute;
    width:100px;
    height:60px;
    background:#F0F8FF;
    border:#CCCCCC 1px solid;
    text-align:center;
    font-size:12px;
    }
    </style>
    <script type="text/javascript">
    function Drag() {
    var obj, ox, oy;

    function startDrag(e) {
    //当按下时初始化参数
    var e = window.event || e;
    obj = this.root;
    ox = e.clientX - obj.offsetLeft;
    oy = e.clientY - obj.offsetTop;
    document.onmousemove = moveDrag;
    document.onmouseup = stopDrag;
    }

    function moveDrag(e) {
    //鼠标移动时改变obj的位置
    var e = window.event || e;
    obj.style.left = e.clientX - ox + "px";
    obj.style.top = e.clientY - oy + "px";
    }

    function stopDrag() {
    //当松开时清除onmousemove方法
    document.onmousemove = document.onmouseup = null;
    }

    this.add = function (o, root) {
    //添加对象
    o.root = root;
    o.onmousedown = startDrag;
    };
    }function $(id) {
    return document.getElementById(id);
    }window.onload = function () {
    var drag = new Drag();
    drag.add($("wc_title"), $("wc"));
    drag = null;
    };
    </script>
    </head>
    <body>
    <div id="wc"><div id="wc_title">&nbsp;<!--郁闷，必须要有内容否则FF拖不出浏览器--></div>传说中的Drag</div>
    </body>
    </html>
      

  3.   

    最基本的DRAG代码.至于判断界限部分你可以自己写.
      

  4.   

    很简单的 限制移动区域只要 现代onmousemove的触发元素
    也就是不使用document.onmousemove 而使用 div.onmousemove
      

  5.   

    楼上的做法可能会出现问题。如果子Div在父Div之外（代码），那么拖动子Div的时候，鼠标总不触发父div的onmousemove事件。反之就总是触发。还是2楼做法简单实效。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <BODY>
    <input type=text id="pos">
    <div id=father style="border:1px solid #000000;height:500px;width:500px;position:absolute;top:40px;left:40px;">
    <div id=son style="border:1px solid #999999;height:100px;width:100px;position:absolute;top:0px;left:0px;" onmousedown="startDrag(event,this)">
    </div>
    </div><script>
    startDrag = function(event,obj){
    var deltaX = event.clientX - parseInt(obj.style.left);
    var deltaY = event.clientY - parseInt(obj.style.top);

    if (document.addEventListener)
    {
    document.addEventListener("mousemove",moveHandler,true);
    document.addEventListener("mouseup",upHandler,true);
    }else if(document.attachEvent){
    document.attachEvent("onmousemove", moveHandler);
    document.attachEvent("onmouseup",upHandler);
    }else{
    var oldmovehandler = document.onmouseover;
    var olduphandler = document.onmouseup;
    document.onmousemove = moveHandler;
    document.onmouseup = upHandler;
    } if (event.stopPropagation)
    {
    event.stopPropagation();
    }else{
    event.cancelBubble = true;
    } if (event.preventDefault)
    {
    event.preventDefault();
    }else{
    event.returnValue = false;
    }
    function moveHandler(e){
    if (!e) e = window.event;

    if (e.clientX<0 || e.clientY<0){
    return;
    }
    var pX = parseInt(obj.parentNode.style.left);
    var pY = parseInt(obj.parentNode.style.top);
    var pW = parseInt(obj.parentNode.style.width);
    var pH = parseInt(obj.parentNode.style.height);
    var sX = parseInt(obj.style.left);
    var sY = parseInt(obj.style.top);
    var sW = parseInt(obj.style.width);
    var sH = parseInt(obj.style.height);
    document.getElementById("pos").value = (sX) +","+(sY);

    if (!(sX<0 || sY<0 || sX > pW-sW || sY > pH-sH)){
    obj.style.left = (e.clientX - deltaX) + "px";
    obj.style.top = (e.clientY - deltaY) + "px";
    }else{
    sX<0?obj.style.left=0:null;
    sY<0?obj.style.top=0:null;
    sX>pW-sW?obj.style.left=pW-sW:null;
    sY>pH-sH?obj.style.top=pH-sH:null;
    if (document.removeEventListener)
    {
    document.removeEventListener("mousemove",moveHandler,true);
    }else if (document.detachEvent) {
    document.detachEvent("onmousemove",moveHandler);
    }
    } if (e.stopPropagation)
    {
    e.stopPropagation();
    }else{
    e.cancelBubble = true;
    } }
    function upHandler(e){
    if (!e) e = window.event; if (document.removeEventListener)
    {
    document.removeEventListener("mouseup",upHandler,true);
    document.removeEventListener("mousemove",moveHandler,true);
    }else if (document.detachEvent)
    {
    document.detachEvent("onmouseup",upHandler);
    document.detachEvent("onmousemove",moveHandler);
    }else{
    document.onmouseup = olduphandler;
    document.onmousemove = oldmovehandler;
    } if (e.stopPropagation)
    {
    e.stopPropagation();
    }else{
    e.cancelBubble = true;
    } }}
    </script>
    </BODY>
    </HTML>
      

  6.   

    看看这个 http://www.haolla.com/girls/index.asp
             http://haolla.com/wy
      

  7.   

    3676(Tr)的可以实现，能不能帮我再实现下里面的div可以拖大缩小？最好在div的右小脚放个小方块，用它来拖大缩小。我javascript不懂，只有问问各位高手哦！谢谢