div 拖动问题

参考
http://www.phpchina.com/html/34/12834-27965.html

解决方案 »

  1.   

    我是用vml画了一条折线，在折线上createElement（div），然后div响应鼠标拖动事件，让div跟随鼠标移动，移动时div老是和鼠标不再一起，而是相差一点距离
      

  2.   

    我期望在vml折线上能自己画一个div，这个div可以任意拖动到期望的位置
      

  3.   

            this.sx = parseInt(this.divObj.scrollLeft) + parseInt(event.clientX);
    this.sy = parseInt(this.divObj.scrollTop) + parseInt(event.clientY);
            var curX = event.clientX; //获取鼠标在网页中的X坐标
            var curY = event.clientY; //获取鼠标在网页中的Y坐标
            var ofleft = this.divObj.offsetLeft;//获取窗口的左位置
            var oftop = this.divObj.offsetTop;//获取窗口的高位置
            var movex = parseInt(ofleft ) + parseInt(curX) - sx; //取得移动后的左位置
            var movey = parseInt(oftop ) + parseInt(curY) - sy; //取得移动后的上位置
            this.divObj.style.left = movex ; //设定移动的位置
            this.divObj.style.top = movey ; //设定移动的位置     
      

  4.   

    改好了！谢谢!! 找了一个参考改好了
    <HTML>
        <HEAD>
            <TITLE>New  Document </TITLE>
            <script Language="javascript">
                var x, y, divLeft, divTop;
                var isMove = false;
                var html = "";
                function MouseDown(obj){
                    isMove = true;
                    x = event.clientX;
                    y = event.clientY;
                    divLeft = obj.offsetLeft;
                    divTop = obj.offsetTop;
                }
                
                function MouseMove(obj){
                    if (isMove) {
                        obj.style.left = divLeft + event.clientX - x;
                        obj.style.top = divTop + event.clientY - y;
                    }
                }
                
                function MouseUp(obj){
                    isMove = false;
                    var a = parseInt(document.getElementById("div1").style.left);
                    var b = parseInt(document.getElementById("div1").style.top);
                    var c = parseInt(document.getElementById("div2").style.left);
                    var d = parseInt(document.getElementById("div2").style.top);
                    html = " <div id = 'div1' style='border:1px solid gray;width:42px;height:39px;position:absolute;left:" + a + "px;top:" + b + "px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
                    line(a, b, c, d, "0000dd");
                    html += " <div id = 'div2' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:" + c + "px;top:" + d + "px' onmousedown='MouseDown(this)' onmousemove=' MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
                    document.body.innerHTML = html
                }
                
                function a(x, y, color){
                    html += " <img border='0' style='position:absolute;left:" + (x + 20) + ";top:" + (y + 20) + ";background-color:" + color + "'src='px.gif' width=1 height=1>";
                }
                
                function line(x1, y1, x2, y2, color){
                    var tmp
                    if (x1 >= x2) {
                        tmp = x1;
                        x1 = x2;
                        x2 = tmp;
                        tmp = y1;
                        y1 = y2;
                        y2 = tmp;
                    }
                    for (var i = x1; i <= x2; i++) {
                        x = i;
                        y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
                        a(x, y, color);
                    }
                }
                function show(){
                    html = " <div id = 'div1' style='border:1px solid gray;width:42px;height:39px;position:absolute;left:1px;top:1px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
                    line(1, 1, 100, 100, "0000dd");
                    html += " <div id = 'div2' style='border:1px solid gray;width:45px;height:44px;position:absolute;left:100px;top:100px' onmousedown='MouseDown(this)' onmousemove='MouseMove(this)' onmouseup='MouseUp(this)'>a </div>";
                    document.body.innerHTML = html;
                }
            </script>
        </HEAD>
        <body onload="show()">
        </BODY>
    </HTML>