本问题解决方法:
根据各位提出的解决方法和思路,发现确实是那个百分比问题(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>