IE8下窗口拖动效果,总感觉抖动得厉害
本帖最后由 business122 于 2012-12-18 16:30:23 编辑 是这样的,先前用JQuery UI里的draggable实现弹出窗口的拖动效果感觉在IE8下感觉有些抖动,后来自己写了代码实现效果还是有这个问题,不知道各位大哥们有没有遇到过类似的问题。代码如下:
$newWin.draggable{(
handle: 'div.win_title'
iframeFix: false,
scroll: false
)}
自己后来写的:
function Do_WinChange(minWidth, minHeight) {
var dragging = false;
var resizing = false;
var iX, iY;
var w, h;
var l, t;
$("#myWin_welcome").mousedown(function (e) {
w = parseInt($("#myWin_welcome").css("width"));
h = parseInt($("#myWin_welcome").css("height"));
l = $("#myWin_welcome").offset().left;
t = $("#myWin_welcome").offset().top;
iX = e.clientX - l;
iY = e.clientY - t;
if (w - iX < 12 || h - iY < 12) {
resizing = true; ; //伸缩窗口
}
else {
dragging = true;
}
this.setCapture && this.setCapture();
return false;
});
document.onmousemove = function (e) {
var e = e || window.event; //获取事件
if (dragging) {
var oX = e.clientX - iX;
var oY = e.clientY - iY;
$("#myWin_welcome").css({ "left": oX + "px", "top": oY + "px" });
return false;
}
if (resizing) {
_w = Math.max(e.clientX - l, minWidth);
_h = Math.max(e.clientY - t, minHeight);
$("#myWin_welcome").css({ "width": _w + 'px', "height": _h + 'px' });
$("#myFrame_myWin_welcome").css({ "width": _w + 'px', "height": _h + 'px' });
return false;
}
}
document.onmouseup = function (e) {
var e = e || window.event;
dragging = false; //移动停止
resizing = false; //停止伸缩
// $("#main").animate({ "left": _offset.left + "px", "top": _offset.top + "px" }, 400)//返回原处
$("#myWin_welcome").releaseCapture();
if (e.stopPropagation) {
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
}
}
大婶们!求围观!!可加分!!
[解决办法]
<div id="f" style="position: absolute; width: 200px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;">我这不觉得抖呀,你不会是在液晶显示器下吧。
<div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;"> 拖动层 </div>
</div>
<script type="text/javascript">
var $=function (id){
var II=document.getElementById(id);
if(!II){
alert(id+" 控制对象不存在!") ;
return false;
}else{
return document.getElementById(id);
}
}
var posX,posY;
var fdiv = $("f");
$("title").onmousedown=function(e)
{
if(!e) e = window.event;
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function(){document.onmousemove = null;}
function mousemove(ev)
{
if(ev==null) ev = window.event;
fdiv.style.left = (ev.clientX - posX) + "px";
fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>
