首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

包含SELECT的拖动层变换OPTION时候为什么页面会闪?解决思路

2012-03-19 
包含SELECT的拖动层变换OPTION时候为什么页面会闪?网上找到很多拖动层的例子,但变换SELECT的OPTION时候会

包含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测试全然没有效果。

热点排行
Bad Request.