包含SELECT的拖动层变换OPTION时候为什么页面会闪?
网上找到很多拖动层的例子,但变换SELECT的OPTION时候会闪动,这是怎么回事?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> DragTheDIV </title>
</head>
<body>
<div id= "d1 " style= "position:absolute;background:#eeeeee;top:20px;left:30px;width:200px;height:200px; ">
<div id= "title " style= "position:relative;top:0px;left:0px;width:100%;height:30px;background:#ccddee; "> 标题栏 </div>
</div>
<div id= "d2 " style= "position:absolute;background:#dddddd;top:50px;left:50px;width:300px;height:300px; ">
<select id= "d ">
<option > ddd </option>
<option > ff </option>
</select>
</div>
<script language= "javascript " type= "text/javascript ">
/*writer:solidluck(西水爱大家)
QQ:45671948----UC:75853187
Version:Beta 1.0
*/
var Browser = {
/*@cc_on
isIE : true,
@*/
isFF : window.navigator.appName.indexOf( "Netscape ") != -1 ? true : false
};
if(Browser.isIE)
{
var HTMLElement = new Function();
var HTMLDivElement = new Function();
var HTMLUnknownElement = new Function();
}
if(!Browser.isIE)
{
function SearchEvent()
{
var func=SearchEvent.caller;
while(func!=null)
{
var arg=func.arguments[0];
if(arg)
{
if(String(arg.constructor).indexOf( 'Event ') > -1)
{
return arg;
}
}
func=func.caller;
}
return null;
}
window.constructor.prototype.__defineGetter__
(
"event ",
function()
{
return SearchEvent();
}
)
HTMLElement.prototype.__defineGetter__
(
"currentStyle ",
function()
{
return this.ownerDocument.defaultView.getComputedStyle(this,null);
}
);
HTMLElement.prototype.__defineGetter__
(
"runtimeStyle ",
function()
{
return this.style;
}
);
HTMLElement.prototype.attachEvent = function(eName,handler)
{
var eType = eName.substring(2,eName.length);
this.addEventListener(eType,handler,true);
}
if(Event)
{
Event.prototype.__defineGetter__
(
"srcElement ",
function()
{
return this.target;
}
);
}
}
function $()
{
if(!arguments.length) return;
var elements = [];
for(var i = 0;i < arguments.length;i++)
{
elements.push(document.getElementById(arguments[i]));
if(Browser.isIE)
{
if(!elements[i].expand)
{
Global.copy(elements[i],HTMLElement.prototype);
Global.copy(elements[i],elements[i].getType().prototype);
elements[i].expand = true;
}
}
}
if(elements.length == 1) return elements[0];
return elements;
}
var Global = {
copy : function(without,object)
{
if(arguments.length != 2) return;
if(!without || !object) return;
for(var index in object)
{
if(without[index]) continue;
without[index]=object[index];
}
}
}
Global.copy(HTMLElement.prototype,{
getType : function()
{
if(this.tagName.toUpperCase() != "DIV ") return HTMLUnknownElement;
return HTMLDivElement;
}
});
Global.copy(HTMLDivElement.prototype,{
parent : function()
{
var Parent = this.offsetParent,current;
if(Parent.tagName.toUpperCase() == "BODY " || Parent.tagName.toUpperCase() == "HTML ")
{
current = this;
}
else
{
current = Parent;
}
return current;
},
drag : function()
{
var _this = this.parent();
var current = this;
var doc = document.documentElement || document.body;
this.runtimeStyle.cursor = "move ";
function down(e)
{
Global.down = true;
Global.left = event.clientX - _this.offsetLeft;
Global.top = event.clientY - _this.offsetTop;
if(_this.setCaptrue) _this.setCaptrue();
else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
document.body.onmousemove = function(e)
{
if(Global.down)
{
_this.runtimeStyle.left = Math.min(Math.max((event.clientX - Global.left),0),doc.clientWidth - _this.clientWidth) + "px ";
_this.runtimeStyle.top = Math.min(Math.max((event.clientY - Global.top),0),doc.clientHeight - _this.clientHeight) + "px ";
}
return false;
}
document.body.onmouseup = function(e)
{
Global.down = false;
if(_this.releaseCapture) _this.releaseCapture();
else if(window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
document.onmousemove = null;
document.onmouseup = null;
return false;
}
return false;
}
this.attachEvent( "onmousedown ",down);
}
});
//开始拖动
$( "title ").drag(); //你看,我拖动标题栏,整个都动了
$( "d2 ").drag(); //我这里只拖动当前DIV
</script>
</body>
</html>
[解决办法]
哪闪啦。。同学。。
你这个IE6测试没看出问题啊。。
FF测试拖拽有问题。。
OP测试全然没有效果。