box verschieben und die Höhe

  • box verschieben und die Höhe

    Hi, wie ihr euch sicher denken könnt hab ich ein Problem, eher mehrere.

    Es geht ums verschieben von boxen, speziell aber um die Höhe dabei.

    Also erstmal alles von vorne, ich will bzw. ich hab 3 verschiedene Möglichkeiten eine box zu verschieben.

    Die Erste ist die ganz einfache, wo man auf die Titelzeile der box klickt und bei gedrückter Mause die gesammte Box verschoben wird. Hier gibt es keine Probleme.

    Die zweite Variante ist die, wo man auf die Titelzeile klick. Hierbei wird die box im DOM geklont. Diesen Klon verschiebt man, die Originalbox bleibt da wo sie ist. Läßt man nach erfolgreichen verschieben die Mause los wird der Klon gelöscht und die Originalbox wird zur gewünschten Stelle verschoben.
    Hier hätte ich gerne das die geklonte Variante beim schieben durchsichtig (wie ein gespenst) wird ich weiß nur nicht wie.

    Bei der dritten Variante, klickt man wiederrum auf die Titelzeile.
    Ich unterscheide hier mal in Variante 3.1 und 3.2.

    Variante 3.2:

    Hierbei wird ein vorhandenes Div an die Stelle der Box positioniert und auf ihre Größe "eingestellt". Diesem Div wird weiterhin nur eine gestrichelter Rand gegeben. Dieses Div verschiebt man dann wie in der 2ten Variante.

    Ich möchte eigentlich der Box keine feste Höhe geben aber hier ist das Problem. Um das Div auf die Größe der Box zubringen brauch ich eine Höhe, gebe ich der Box keine Höhe wird das Div nur 0 hoch.
    Zu dem kann es dabei zu Problemen kommen mit "min-height" und "max-height".

    Variante 3.1:

    Hierbei wird die Originalbox geklont. Direkt unter dem box_div befindet sich ein weiteres div:

    Quellcode

    1. <div id='unsichtbar' style='visibility:visible;'> ...


    Bei der geklonten Variante wird dieses div auf 'hidden' gestellt. Hier ist das Problem das dadurch zwar die
    Größe der Box beibehalten wird aber alles weiß ist, ich möchte aber eigentlich alles durchsichtig haben. Wie in der Variante 3.2, wie kann man das hinbekommen?


    Den Quellcode findet ihr weiter unten.

    Hier noch eine andere Frage:

    ich möchte auch sowas einbauen wo man die box größer und kleiner machen kann, indem man den Rand anfässt und zieht.
    Gibt es da irgendwo code der einen da weiter bringen kann?

    Ich hab mir überlegt in der box noch drei weitere divs einzubauen, einen rechts, einen unten und einen rechts unten. Alle drei sind natürlich nur einpaar pixel hoch bzw. breit.
    Wenn ein div angeklickt wird und bei geklickter Maus gezogen wir, wird der unterschied, der zum Klickpunkt entsteht, von der Höhe bzw. der Breite oder beidem abgezogen.
    Nur hier tritt wieder das Problem mit der nicht gesetzten Höhe auf! Gibt es hier irgendwelche Vorschläge, aber immer bdenken es soll keine feste Höhe gesetzt werden, auch nicht prozentual.





    Hier mal der quellcode, ich hab den aber vereinfacht:

    Quellcode

    1. <div id="verschieben" style="border:0px dashed rgb(0,0,0); position:absolute;left:0px;top:0px;width:0px;height:0px"></div>


    Quellcode

    1. function selectMouse(e)
    2. { //unterscheidet zwischen firefox und ie
    3. e = (e) ? e : ((window.event) ? window.event : "");
    4. var p = (e.target) ? e.target : e.srcElement;
    6. //verify that user clicked the 'titlebar' element
    7. if(p.attributes['id'] && p.attributes['id'].value.indexOf('titlebar_') != -1){
    9. x=e.clientX; //Mouse postion wird gemerkt (x-Achse)
    10. y=e.clientY; //Mouse postion wird gemerkt (y-Achse)
    12. //es wird die Box herrausbekommen, die wir gerade "anfassen"
    14. var pstr=p.attributes['id'].value;
    15. var temp=pstr.substring(pstr.indexOf('_')+1,pstr.length);
    17. if(document.getElementById('box_'+temp)){
    18. isDrag=true;
    19. box=document.getElementById('box_'+temp);
    21. if(Variante 2 oder 3){
    23. verschiebung_setzen('g');
    24. //get the box coordinates
    25. tx=parseInt(box.style.left);
    26. ty=parseInt(box.style.top);
    27. box.style.zIndex=zindex;zindex++;
    28. if(box2 != null)
    29. box2.style.zIndex=zindex;zindex++;
    30. }
    31. else if(Variante 1){
    33. tx=parseInt(box.style.left);
    34. ty=parseInt(box.style.top);
    35. box.style.zIndex=zindex;zindex++;
    37. }
    39. }
    40. }
    41. }
    44. function mouseMove(e)
    45. {
    46. if (isDrag) //only move the box if the user is dragging it
    47. {
    48. e = (e) ? e : ((window.event) ? window.event : "");
    50. //das if verhindert das die box über den sichbaren Bereich nach !oben! verschoben werden kann
    51. if((e.clientY + (ty - y)) > -1){
    53. if(Variante 2 und 3){
    54. if(box2 != null){
    55. box2.style.left = e.clientX + (tx - x);
    56. box2.style.top = e.clientY + (ty - y);
    57. }
    58. }else{ //Variante 1
    59. box.style.left = e.clientX + (tx - x);
    60. box.style.top = e.clientY + (ty - y);
    61. }
    62. }
    63. }
    64. }
    70. function verschiebung_setzen(zutun){
    72. if(box != null){
    73. switch(zutun) {
    75. case "g": //groß
    76. if(Variante 3.1 oder Variante 2){
    77. box2 = box.cloneNode(true);
    78. box.parentNode.insertBefore(box2, box);
    80. if(Variante 3.1){
    82. for(var i=0; i< box2.childNodes.length; i++)
    83. if(box2.childNodes[i].attributes && box2.childNodes[i].attributes.id && box2.childNodes[i].attributes.id.nodeValue == CONST['unsichtbar']){
    84. box2.childNodes[i].style.visibility = "hidden";
    85. break;
    86. }
    87. }
    88. box2.style.border='2px dashed rgb(0, 0, 0)';
    90. }else if(Variante 3.2){
    93. if(document.getElementById("verschieben")){
    94. box2=document.getElementById('verschieben');
    96. box2.style.top = box.style.top;
    97. box2.style.left= box.style.left;
    98. box2.style.width= box.style.width;
    99. box2.style.height= box.style.height;
    102. box2.style.border='2px dashed rgb(0, 0, 0)';
    104. }
    105. }
    106. break;
    108. case "k": //klein
    109. /*
    110. unwichtig
    111. */
    112. break;
    115. default: break;
    116. }
    117. }
    118. }
    Alles anzeigen

  • viele fragen für einen Thread.
    Würde mich da mal in den Code von hier einlesen: http://www.walterzorn.de/dragdrop/dragdrop.htm#download

    Problem2: Die Klasse hat Transparenteffekte fürs "Gespenst":

    Quellcode

    1. DDObj.prototype._setOpaRel = function(d_x, d_kd, d_y, d_o)
    2. {
    3. if(this.css && (this.diaphan || d_kd))
    4. {
    5. d_y = this.opacity*d_x;
    6. if(typeof this.css.MozOpacity != dd_u) this.css.MozOpacity = d_y;
    7. else if(typeof this.css.filter != dd_u)
    8. this.css.filter = "Alpha(opacity="+parseInt(100*d_y)+")";
    9. else this.css.opacity = d_y;
    10. for(var d_i = this.children.length; d_i;)
    11. if(!(d_o = this.children[--d_i]).detached) d_o._setOpaRel(d_x, 1);
    12. }
    13. };
    Alles anzeigen



    Problem 4: Die Klasse hat Resize Funktionen für alle Browser...

    Quellcode

    1. DDObj.prototype.resizeTo = function(d_w, d_h, d_o)
    2. {
    3. if(!this.div) return;
    4. d_w = (this.w = dd.Int(d_w))-this.dw;
    5. d_h = (this.h = dd.Int(d_h))-this.dh;
    6. if(dd.n4)
    7. {
    8. this.div.resizeTo(d_w, d_h);
    9. if(this.is_image)
    10. {
    11. this.write('<img src="' + this.src + '" width="' + d_w + '" height="' + d_h + '">');
    12. (this.nimg = this.div.document.images[0]).src = this.src;
    13. }
    14. }
    15. else if(typeof this.css.pixelWidth != dd_u)
    16. {
    17. this.css.pixelWidth = d_w;
    18. this.css.pixelHeight = d_h;
    19. if(this.is_image)
    20. {
    21. (d_o = this.nimg.style).pixelWidth = d_w;
    22. d_o.pixelHeight = d_h;
    23. }
    24. }
    25. else
    26. {
    27. this.css.width = d_w + dd.px;
    28. this.css.height = d_h + dd.px;
    29. if(this.is_image)
    30. {
    31. (d_o = this.nimg).width = d_w;
    32. d_o.height = d_h;
    33. if(!d_o.complete) d_o.src = this.src;
    34. }
    35. }
    36. };
    Alles anzeigen


    Bei den Varianten 3 frage ich mich... du weißt wie man Höhe und Breite von einem DIV auslesen kann, das keine statische Höhe und Breite hat, oder?
    Falls nicht: Das geht mit offsetWidth und offsetHeight.

    Quellcode

    1. <div onclick="alert(this.offsetWidth+'x'+this.offsetHeight)">Hallo</div>


    Mit diesen Angaben kannst du doch alles fabrizieren. Du brauchst kein zusätzliches DIV zum ausfüllen eines weiteren DIVs.
    Und auch das mit den 3 Boxen lässt sich so einfach realisieren.