力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 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标
  • ¥15 一般三角模糊数的上界值和下届值取中值的多少比较合理?
  • ¥15 关于#python#的问题,请各位专家解答!
  • ¥20 Hbase启动失败,无法启动HMaster
  • ¥20 Lumerical FDTD solutions 中模型的相对阻抗,有效介电常数和有效磁导率的实部和虚部的数据如何获得?
  • ¥100 sql reporting service 远程smtp服务器配置支持
  • ¥15 ppyoloe_r带角度目标检测,loss_cls没法收敛
  • ¥15 淘宝交易指数如何解读,其关联的数据指标是什么
  • ¥15 Linux下安装搜狗拼音不能显示中文