Fensterbegrenzung mit js

Dicker1

Hallo an alle
Ich hoffe das ihr mir helfen könnt.
Folgendes:

Ich habe einen Div-Container den ich mittels Drag& Drop verschieben kann. Was auch wunderbar funktioniert. Nun stehe ich aber vor dem Problem, das sich dieser Div-Container aus dem Browser-fenster hinausschieben läßt.
Wie kann ich das verhindern?

Mein bisheriger Ansatz sieht wie folgt aus:

Code

if (objDrag.style.left < "2px" || objDrag.style.top < "2px")
                                        {    
                                         stopDrag()    
                                        }

Nur das klappt nicht und die Bewegung wird sehr langsam und verzögert.

Danke im vorraus für eure hilfe

Dicker

synaptic

mmh also für links und oben klappt des ja von der abfrage her...
nur beim ausführenden code würde ich die position des divs auf 2px setzen oben und unten.. also immer den wert, derals begrenzung angegeben wurde..., das ganze aufrufen vor stopDrag();
für die rechte und untere begrenzung is des viewport-höhe und vieport-breite minus 2px und das minus die breite bzw höhe des divs
is halt n bissi rechnerei mit formeln

Dicker1

Die Abfrage klappt nicht. Der Container läßt sich über die grenze von 2px hinausschieben. Auch ist es so, das die Containerbewegung dadurch extrem verlangsamt wird.
Left und Top reicht aus. Rechts und unten kann ich vernachlässigen

synaptic

in der drag-funktion kannste auch direkt ne sperre einbauen... und wenn des in einer if-abfrage net hinhaut, machste eben zwei..
sollte so auf jeden fall klappen

Dicker1

So sieht die Drag-funktion aus:

Code

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 < "2px" || objDrag.style.top < "2px")
                                        {    
                                         stopDrag()    
                                        } 
                            }
                }

Alles anzeigen

Die sperre steht in der Funktion.

Auch wenn ich die Abfrage aufteile klappt es nicht.
Das verschieben stopt nach wenigen px.

synaptic

aber das stopDrag() wird aufgerufen? also ausgeführt...?
mach mal nen alert da rein, der dann die aktuelle position zurückliefert..
und arbeite nicht mit strings.. parse den integer-wert aus der position und arbeite mit ner ganzen zahl...
die funktion heisst parseInt()

Dicker1

Ich habe es so gemacht :

Code

lft = parseInt(objDrag.style.left); 
                            tp = parseInt(objDrag.style.top); 


                                  if (lft < 2)
                                        {    
                                         stopDrag()    
                                        } 
                                 if (tp < 2)
                                        {    
                                         stopDrag()    
                                        }   
                            }

Alles anzeigen

Die Werte habe ich mir anzeigen lassen. Die stimmen auch. Ebenso wird auch der "stopDrag" aufgerufen. Aber es klappt trotzdem nicht. Der Container wandert immer heraus. Die Sperre ist nicht wirksam.

synaptic

dann sag dem ding mal nach stopDrag noch
objDrag.style.left = "2px";
objDrag.style.top = "2px";

ps: bin in ca ner std wieder da...

Dicker1

Das klappt jetzt.
Danke Dir.

synaptic

jo, kein ding

Dicker1

Jetzt muß endlich nur noch das verändern der Größe mittels Mausklick funktionieren und ich kann dieses Projekt endlich abhacken

synaptic

wennste des jetzt mal konkretisierst kann ich dir da evtl au nen tip geben

Dicker1

Ich bstel immer noch mit dem Resize von div-Container herum:
Folgenden Code habe ich ja:

Code

function init()
                {

                if(IE)
                  ieBody = getBody(); 
                  hy = window.event.clientY;
                  wx = window.event.clientX;
                  parent.document.onmousemove = getMousePos;
                  parent.document.onmouseup = fnc_abbrechen;
                }



//Größenänderung vom Div//

// Variablen für die Mausposition                
var moX = 0; 
var moY = 0; 
var hy;
var wx;


function getBody()
{
  return (window.document.compatMode == "CSS1Compat") ?
          window.document.documentElement : window.document.body || null;
}


var ieBody = null;


// Funktion zum Ermitteln der Mausposition
function getMousePos(e)
{
  // Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
  moX = (IE) ? window.event.clientX : e.pageX;
  //moY = (IE) ? (window.event.clientY + ieBody.scrollTop) : e.pageY;
  moY = (IE) ? window.event.clientY : e.pageY;
  //window.status = "Mauskoordinaten (x, y): (" + moX + ", " + moY +")";
}


function fnc_anfassen()
{
    getMousePos()
    while (fnc_pruefen() == true)
        {
            //getMousePos() 
            parent.document.onmousedown = fnc_anpassen;
            parent.document.onmousemove = fnc_anpassen;
             if (fnc_abbruch() == true)
                {
                    break;
                }  
        }
}

var pruefen;
function fnc_pruefen()
{
    if (hy != moY || wx != moX)
        {
            pruefen = true;
        }
    return pruefen;
}        


var abbruch;    
function fnc_abbruch()
{
    if (parent.document.onmouseup = true)
        {
            abbruch = true;
        }
    return abbruch;
}


function fnc_anpassen()
{
    var apy;
    var apx;
    var sy = parent.document.getElementById('divzwei').offsetHeight;
    var sx = parent.document.getElementById('divzwei').offsetWidth;
    //alert (sy + "," + sx);
    apy = hy + (moY - sy) + "px";
    apx = wx + (moX - sx) + "px";
    //alert (apx + "," + apy);
    parent.document.getElementById('divzwei').style.height = apy;
    parent.document.getElementById('divzwei').style.width = apx;
    fnc_anfassen()
}

Alles anzeigen

Der html-code sieht so aus:

HTML

<div class="layerOptions_zwei" id="divzwei">
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            <tr>
                <td class="layer_td_table" border="0" cellpadding="0" cellspacing="0" height="18" width="100%">
                    <table border="0" cellpadding="0" cellspacing="0" height="15" width="100%">
                        <tr>
                            <td height="18" width="100%">
                                <table class="layer_tab" border="0" cellpadding="0" cellspacing="0" height="18" width="960"onmousedown="startDrag(document.getElementById('divzwei'));">
                                    <tr>
                                        <td height="18" width="25"><img src="./images/sem_icon_delete.gif"></td>
                                        <td id="td_id" height="18" width="935"></td>
                                    </tr>
                                </table>
                            </td>
                            <td onclick="fnc_schliessen_zwei();" cellpadding="0" cellspacing="0" height="18" width="20"><img src="./images/layer_schliessen.jpg" border="0"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td cellpadding="2" width="100%">
                    <iframe src="fnc_showlayer_zwei();" class="iframeAll" marginheight="0" marginwidth="0" id="ifr_zwei" name="iframe_zwei" frameborder="0" scrolling="yes"></iframe>
                </td>
            </tr>
                <tr>
                    <td height="15" width="100%">
                    <table border="0" cellpadding="0" cellspacing="0" height="15" width="100%">
                    <tr>
                        <td height="15" width="965"></td>
                        <td onmousedown="fnc_anfassen()" class="mauszeiger" height="15" width="15"><img src="./images/resize.gif"></td>
                    </tr>
                    </table>
                    </td>
                </tr>
        </table>
    </div>

Alles anzeigen

Aber wenn ich das div anpacke, dann kann ich nicht mit gedrückter Maustaste das div in seiner größe verändern.
Daran bin ich schon seit bald 4 Wochen dran.
Es ist zum verzweifeln

synaptic

ja hat des denn mit den funktionen die ich dir schon gesagt hatte net gefruchtet?
du brauchst doch nur ne funktion, die überwacht, ob die maustaste gedrückt bleibt oder nich??

Dicker1

Ich habe versucht und versucht und herumgebastelt.
Aber es klappt nicht. Ich bin mit meinem Latein am ende.

Ich schaffe es nicht, das sich das Div mit gedrückter Maustaste vergrößert oder verkleinert.

synaptic

poste mal bitte ein extrakt von den zuständigen drag-funktionen, der resize-funktion, dem dazugehörigen html-code und nicht zu vergessen den style.
wenn ich mich recht entsinne kannst das ja net online stellen, daher das extrakt des notwendigen.
kann mich aber heute erst spät abends dransetzen (wenn überhaupt) bei mir brennt akut die luft, wegen meines cmstest und ich hab privat grad nen arsch voll zu tun

Dicker1

Hallo synaptic
Danke für Deine hilfe.
Nachfolgend findest Du das gewünschte.

Style:

HTML

.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              : 150px;
                            left             : 150px;
                            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            : 100%;
                            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;
                        }


.mauszeiger                {
                             cursor               :nw-resize;
                        }

Alles anzeigen

html-Teil:

HTML

</head>
    <body onselectstart="return false" 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" id="divAll">
        <table border="0" cellpadding="0" cellspacing="0" height="600" width="100%">
            <tr>
                <td class="layer_td_table" border="0" cellpadding="0" cellspacing="0" height="18" width="100%">
                    <table border="0" cellpadding="0" cellspacing="0" height="15" width="100%">
                        <tr>
                            <td height="18" width="100%">
                                <table class="layer_tab" border="0" cellpadding="0" cellspacing="0" height="18" width="960" onmousedown="startDrag(document.getElementById('divAll'));" >
                                    <tr>
                                        <td height="18" width="25"><img src="./images/sem_icon_delete.gif"></td>
                                        <td height="18" width="935" ><?php echo fnc_startauswahl ( $_GET['siteId'] , "name" ); ?></td>
                                    </tr>
                                </table>
                            </td>
                            <td onclick="fnc_schliessen();" cellpadding="0" cellspacing="0" height="18" width="20"><img src="./images/layer_schliessen.jpg" border="0"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td cellpadding="2" width="100%">
                    <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"></iframe>
            </tr>
        </table>
    </div>

    <div class="layerOptions_zwei" id="divzwei">
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            <tr>
                <td class="layer_td_table" border="0" cellpadding="0" cellspacing="0" height="18" width="100%">
                    <table border="0" cellpadding="0" cellspacing="0" height="15" width="100%">
                        <tr>
                            <td height="18" width="100%">
                                <table class="layer_tab" border="0" cellpadding="0" cellspacing="0" height="18" width="960"onmousedown="startDrag(document.getElementById('divzwei'));">
                                    <tr>
                                        <td height="18" width="25"><img src="./images/sem_icon_delete.gif"></td>
                                        <td id="td_id" height="18" width="935"></td>
                                    </tr>
                                </table>
                            </td>
                            <td onclick="fnc_schliessen_zwei();" cellpadding="0" cellspacing="0" height="18" width="20"><img src="./images/layer_schliessen.jpg" border="0"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td cellpadding="2" width="100%">
                    <iframe src="fnc_showlayer_zwei();" class="iframeAll" marginheight="0" marginwidth="0" id="ifr_zwei" name="iframe_zwei" frameborder="0" scrolling="yes"></iframe>
                </td>
            </tr>
                <tr>
                    <td height="15" width="100%">
                    <table border="0" cellpadding="0" cellspacing="0" height="15" width="100%">
                    <tr>
                        <td height="15" width="965"></td>
                        <td onmousedown="fnc_anfassen()" class="mauszeiger" height="15" width="15"><img src="./images/resize.gif"></td>
                    </tr>
                    </table>
                    </td>
                </tr>
        </table>
    </div>

Alles anzeigen

Wie du siehst sind es 2 div-Container. Das resize-event wird aber nur auf den div-Container "divzwei" angewandt.

Javascript-code:

Code

//Layer und bewegung
// Auslesen der Url
    function fnc_createNewLayer( siteId )
                {
                    location.href = 'index.php?siteId=' + siteId;
                }


//Layer erstellen
    function fnc_showLayer ()
                {
                    document.getElementById('divAll').style.visibility='visible';
                    document.getElementById('ifr_all').style.visibility='visible';
                }


//Layer erstellen und den Pfad sowie den Dokumentennamen übergeben
            var pfade="";
            var td_namen="";
    function fnc_showLayer_zwei ( pfad , title )
                {
                    pfade = "./popups/servicenet/" + pfad + "/index.php";
                    td_namen =  title;
                    parent.document.getElementById('ifr_zwei').src = pfade;
                    parent.document.getElementById('td_id').innerHTML = td_namen;
                    parent.document.getElementById('divzwei').style.visibility='visible';
                    parent.document.getElementById('ifr_zwei').style.visibility='visible';
                }


//Layer schliessen
    function fnc_schliessen()
                {
                    document.getElementById('ifr_All').style.visibility='hidden';
                    document.getElementById('divAll').style.visibility='hidden';
                    document.getElementById('ifr_All').style.display='none';
                    document.getElementById('divAll').style.display='none';
                }
//Layer_zwei schliessen
    function fnc_schliessen_zwei()
                {
                    parent.document.getElementById('divzwei').style.visibility='hidden';
                    parent.document.getElementById('ifr_zwei').style.visibility='hidden';
                    parent.document.getElementById('divzwei').style.display='none';
                    parent.document.getElementById('ifr_zwei').style.display='none';
                }




//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;


                if(IE)
                  ieBody = getBody();
                  hy = window.event.clientY;
                  wx = window.event.clientX;
                  parent.document.onmousemove = getMousePos;
                  parent.document.onmouseup = fnc_abbrechen;
                }


//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;
                                var lft = parseInt(objDrag.style.left);
                                var tp = parseInt(objDrag.style.top);
                                  if (lft <= 2)
                                        {
                                         stopDrag()
                                         objDrag.style.left = "2px";
                                        }
                                 if (tp <= 2)
                                        {
                                         stopDrag()
                                         objDrag.style.top = "2px";
                                        }
                            }
                }
//Stoppen der Bewegung
        function stopDrag(ereignis)
                {
                 objDrag = null;
                }


//Größenänderung vom Div//


// Variablen für die Mausposition
var moX = 0;
var moY = 0;
var hy;
var wx;


function getBody()
{
  return (window.document.compatMode == "CSS1Compat") ?
          window.document.documentElement : window.document.body || null;
}


var ieBody = null;


// Funktion zum Ermitteln der Mausposition
function getMousePos(e)
{
  // Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
  moX = (IE) ? window.event.clientX : e.pageX;
  //moY = (IE) ? (window.event.clientY + ieBody.scrollTop) : e.pageY;
  moY = (IE) ? window.event.clientY : e.pageY;
  //window.status = "Mauskoordinaten (x, y): (" + moX + ", " + moY +")";
}


function fnc_anfassen()
{
    getMousePos()
    while (fnc_pruefen() == true)
        {
            //getMousePos()
            parent.document.onmousedown = fnc_anpassen;
            parent.document.onmousemove = fnc_anpassen;
             if (fnc_abbruch() == true)
                {
                    break;
                }
        }
}


var pruefen;
function fnc_pruefen()
{
    if (hy != moY || wx != moX)
        {
            pruefen = true;
        }
    return pruefen;
}


var abbruch;
function fnc_abbruch()
{
    if (parent.document.onmouseup = true)
        {
            abbruch = true;
        }
    return abbruch;
}


function fnc_anpassen()
{
    var apy;
    var apx;
    var sy = parent.document.getElementById('divzwei').offsetHeight;
    var sx = parent.document.getElementById('divzwei').offsetWidth;
    //alert (sy + "," + sx);
    apy = hy + (moY - sy) + "px";
    apx = wx + (moX - sx) + "px";
    //alert (apx + "," + apy);
    parent.document.getElementById('divzwei').style.height = apy;
    parent.document.getElementById('divzwei').style.width = apx;
    fnc_anfassen()
}

Alles anzeigen

So das müßte alles sein. Wenn Du noch etwas benötigst, dann gib bescheid.

Nochmals vielen Dank im voraus
Dicker

Tags