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

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

报告相同问题?

悬赏问题

  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题