div -verschiebung

Dicker1

Hallo an alle. Ich sitze hier vor einen Problem und komme nicht weiter.
Und zwar:

Mit dem folgenden JS-Code kann ich meine Layer verschieben, was auch gut klappt:

Code

//Bewegung der Layer durch Maus                
                var objDrag = null;     
                var mouseX = 0;       
                var mouseY = 0;      
                var offX = 0;           
                var offY = 0;         

                IE = document.all&&!window.opera;
                DOM = document.getElementById&&!IE;

//initialisierung der Funktion
        function init()
                {
                    document.onmousemove = doDrag; 
                    document.onmouseover = doDrag;
                    document.onmouseout = doDrag;
                    document.onmouseup = stopDrag;  
                }
//start Element
        function startDrag(objElem)
                {
                    objDrag = objElem;
                    offX = mouseX - objDrag.offsetLeft;
                    offY = mouseY - objDrag.offsetTop;
                }


//Bewegung des Layers 
        function doDrag(ereignis)
                {
                    mouseX = (IE) ? window.event.clientX : ereignis.pageX;
                    mouseY = (IE) ? window.event.clientY : ereignis.pageY;


                        if (objDrag != null) 
                        {
                            objDrag.style.left = (mouseX - offX) + "px";
                            objDrag.style.top = (mouseY - offY) + "px";
                        }
                }
//Stoppen der Bewegung
        function stopDrag(ereignis) 
                {
                    objDrag = null;
                }

Alles anzeigen

Wenn ich nun die div's ziehe, dann rutschen diese mir unter den oberen Rand des Browsers. Dort wo die Symbolleisten vom IE beginnen.

Wie kann ich das verhindern?

Danke im vorraus

synaptic

poste bitte zusätzlich den entsprechenden html-teil...
dann schau ich mir des heute abend mal an
akut geht net, weil ich in der schule hocke

Dicker1

Hallo synaptic

Ich habe noch etwas erweitert. indem ich von der Position ausgehe und abfrage. Wenn diese kleiner 1 ist dann sollte die function beenden. Klappt aber nicht.

Code

/Bewegung der Layer durch Maus                
                var objDrag = null;     
                var mouseX = 0;       
                var mouseY = 0;      
                var offX = 0;           
                var offY = 0;         

                IE = document.all&&!window.opera;
                DOM = document.getElementById&&!IE;

//initialisierung der Funktion
        function init()
                {
                    document.onmousemove = doDrag; 
                    document.onmouseover = doDrag;
                    document.onmouseout = doDrag;
                    document.onmouseup = stopDrag;  
                }
//start Element
        function startDrag(objElem)
                {
                    objDrag = objElem;
                    offX = mouseX - objDrag.offsetLeft;
                    offY = mouseY - objDrag.offsetTop;
                }


//Bewegung des Layers 
        function doDrag(ereignis)
                {
                    mouseX = (IE) ? window.event.clientX : ereignis.pageX;
                    mouseY = (IE) ? window.event.clientY : ereignis.pageY;

                          if (objDrag != null) 
                            {
                            objDrag.style.left = (mouseX - offX) + "px";
                            objDrag.style.top = (mouseY - offY) + "px";
                            window.status = "Box-Position: " + objDrag.style.left + ", " + objDrag.style.top;
                                if (objDrag.style.left < 1 || objDrag.style.top < 1)
                                    {
                                        objDrag = null;
                                    }
                            }
                }
//Stoppen der Bewegung
        function stopDrag(ereignis) 
                {
                    objDrag = null;
                }

Alles anzeigen

der html code:

PHP

<body class="frame_ueberlauf" marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" onload="<?php if ( $_GET['siteId'] == 4 || $_GET['siteId'] == 31 || $_GET['siteId'] == 10 ) { echo "fnc_showLayer();"; }?>init();">

    <div class="layerOptions" onmousedown="startDrag(this);" id="divAll" >
        <table width="980" height="600" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="layer_td_table" width="980" height="18" border="0" cellpadding="0" cellspacing="0">
                    <table width="980" height="15" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="980" height="18">
                                <table class="layer_tab" width="960" height="18" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="25" height="18"><img src="./images/sem_icon_delete.gif"></td>
                                        <td width="935" height="18"><?php echo fnc_startauswahl ( $_GET['siteId'] , "name" ); ?></td>
                                    </tr>
                                </table>
                            </td>
                            <td onclick="fnc_schliessen();" width="20" height="18"cellpadding="0" cellspacing="0"><img src="./images/layer_schliessen.jpg" border="0"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td width="975" cellpadding="2">
                    <iframe src="<?php echo fnc_startauswahl ( $_GET['siteId'] , "seite" ); ?>" class="iframeAll" marginheight="0" marginwidth="0" scrolling="yes" frameborder="0" id="ifr_all" name="iframe_all" resizable="<?php( $_GET['siteId'] , "groesse" );?>"></iframe>
                </td>
            </tr>
        </table>
    </div>

Alles anzeigen

Wenn du noch etwas sehen willst dann gib bescheid

gruß
Sven

synaptic

den style bräucht ich noch

Dicker1

Hallo synaptic

Der Style sieht so aus:

Code

.layerOptions             {
                            position         : absolute;
                            top              : 150px;
                            left             : 150px;
                            width            : 980px;
                            height           : 600px;
                            border           : 1px solid #000000;
                            background-color : #cccccc;
                            z-index          : 1;
                            visibility       : hidden;
                            cursor           : default;
                        }

.layerOptions_zwei            {
                            position         : absolute;
                            top              : 250px;
                            left             : 200px;
                            width            : 980px;
                            height           : 600px;
                            border           : 1px solid #000000;
                            background-color : #cccccc;
                            z-index          : 2;
                            visibility       : hidden;
                            cursor           : default;
                        }


.iframeAll                {
                            position         : relative;  
                            bottom           : 0px;
                            left             : 0px;
                            width            : 980;
                            height           : 100%;
                            border           : 1px solid #000000;
                            visibility       : hidden;
                        }

.layer_td_table            {
                           color             :#FFFFFF;
                           font-family       : Verdana;
                           font-size         : 10px;
                           font-weight       : bold;
                           text-decoration   : none;
                           background-image     :url(../images/layer_leiste.jpg);
                        }    

.layer_tab                {
                           color             :#FFFFFF;
                           font-family       : Tahoma;
                           font-size         : 11px;
                           font-weight       : bold;
                           text-decoration   : none;
                        }


.frame_ueberlauf
                        {
                            overflow          :hidden;
                        }

Alles anzeigen

Ich komme nicht auf die Lösung, egal wie viele Stunden ich daran sitze.

Gruß
Sven

synaptic

also ich hab mal des ganze php-gedöhnse rausgenommen und des draggen und droppen funzt soweit schon...
die einzige auffälligkeit, die ich gefunden habe war das das erste div mit dem style .layerOptions auf hidden war.. habs visible gesetzt und da lief des mit dem script....
und im firefox is des div etwas nach unten und etwas nach rechts gesprungen, konnte aber bisher nicht eingrenzen woran des liegt

Tags