写了个可拖动的div,每次刷新页面之后点击都会突然跳动到最左边

本问题解决方法：
根据各位提出的解决方法和思路，发现确实是那个百分比问题(left:30%;),第一次拖动div的时候它还是30%，拖动一次之后就变成了px了，所以做了以下改动：
判断是否是带有%的left样式，然后再做计算，至于为什么改成0.7(70%)而不是0.3(30%)就把跳动最小化，我也是不懂的。。。。感谢各位

 var o,X, Y; 
        function getObject(obj, e) {
            o = obj;
            document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
            if (o.style.left.indexOf("%") >0) {
                X = e.clientX - 0.7 * e.clientX
            } else {
                X = e.clientX - parseInt(o.style.left);
            }
            Y = e.clientY - parseInt(o.style.top);
        }

以下是原问题：
据说是定位问题，但技术不到位，不懂怎样解决。怎样修改我的代码拖动的时候才不会突然跳到一个位置呢？求大佬大姐大帮忙。
主要代码如下：

 <style type="text/css">
#div_add {    
HEIGHT: 796px; 
WIDTH: 1420px;  
background-color:#000;    
position:absolute;    
top:0;    
left:0;    
z-index:2;    
opacity:0;        
filter: alpha(opacity=0);    
display:none;
}
#log_window {    
BORDER-LEFT-WIDTH: 1px; 
CURSOR: default; 
FONT-SIZE: 9pt; 
HEIGHT: auto; 
BORDER-RIGHT-WIDTH: 1px; 
WIDTH: 550px; 
BORDER-BOTTOM-WIDTH: 1px; 
POSITION: absolute; 
LEFT: 30%; 
Z-INDEX: 10002; 
TOP: 123px; 
BORDER-TOP-WIDTH: 1px;
display:none;
background-color:#ffffff;  
}
</style>
<div id="div_add"></div>
<div id="log_window" style="width:550px;height:200px;top:123px;left:30%;"></div>

<script>
        //点击按钮弹出div层
            function shield() {
            var html='';
            html+='<table><tr><td>';
            html+='<input id="ipt" />';
            html+='</td></tr></table>';
            $('#log_window').html(html);
            }

            //设置为可拖动的div
        var o,X, Y; 
        function getObject(obj, e) {

            o = obj;
            document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
            X = e.clientX - parseInt(o.style.left);
            Y = e.clientY - parseInt(o.style.top); 
        }
        document.getElementById("log_window").onmousedown = function (e) {
            var obj = document.elementFromPoint(event.clientX, event.clientY);
            if (obj.tagName.toLowerCase() === 'input' || obj.tagName.toLowerCase() === 'textarea' || obj.tagName.toLowerCase() === 'td') {
                return false;
            }
            getObject(this, e || event);
        };
        document.onmousemove = function (dis) { 
            if (!o) {
                return;
            }
            if (!dis) {
                dis = event;
            }
            o.style.left = dis.clientX - X + "px";
            o.style.top = dis.clientY - Y + "px";
        };
        document.onmouseup = function () { 
            if (!o) {
                return;
            }
            document.all ? o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)
            o = '';
        };
    </script>

图片说明

你的div的left单位都不同，一个百分比，一个是像素，不换算一下就能直接使用................

 o.style.left = dis.clientX - X + "px";
 改为
 o.style.left = dis.clientX+550 - X + "px";
 //这个550就是拖得那个块的宽度

1喽说的是对的你开始定位要加上你本身的宽度，他开始会直接跳到left-width的位置。
document.onmousemove = function (dis) {
if (!o) {
return;
}
if (!dis) {
dis = event;
}
o.style.left = dis.clientX + o.style.width- X + "px";
o.style.top = dis.clientY - Y + "px";
};

写了一个， css随便写的，具体你根据你的情况修改下即可！

yc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function($) {

$.fn.huadong = function( obj, obja, time ) {

this.height($(window).height()).css({'position':'absolute', 'top':'0px', 'left' : '0px'}); //首先把最外层的标签对象设置为浮动，上边为0，左边也为0

var left = $(obj).width(); //取得左边栏的宽度

$(obj).height($(window).height()).width(0).hide(); //将左边栏的高度设置为浏览器的高度，宽度为0，并隐藏掉！这样是为了页面载入的时候初始化

$(obja).click(function(){ //给触发按钮绑定点击事件，也就是鼠标点击触发按钮后执行的动作

$(obj).show().animate({'width':left + 'px'}, time); //把左边栏的宽度设置为原来的宽度并显示出来，根据设定的时间慢慢展现

});

$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件

$(this).animate({'width':'0px'}, time, function(){ $(this).hide(); }); //又把左边栏的宽度设置为0，并且隐藏

});

}

})(jQuery);

出现抖动的时候，我觉得应该是碰撞检测没有计算好导致的，什么时候放？放到哪里？碰撞距离是多少？什么时候释放？都应该考虑到。