力O
2017-10-24 08:49
采纳率: 50%
浏览 1.7k
已采纳

写了个可拖动的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>

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • glustful 2017-10-24 09:15
    已采纳

    图片说明

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

    评论
    解决 无用
    打赏 举报
查看更多回答(4条)

相关推荐 更多相似问题