Javascript div resize/verschieben Problem

  • JavaScript

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von shutdown.

    Javascript div resize/verschieben Problem

    Hi Leute.
    Folgendes Script bewirkt, dass man ein Div verschieben und neu skalieren kann.
    Leider ist das Problem, dass wenn ich nun das Div neu skaliere, es auch mit verschoben wird, weil ich ja dazu in das Div klicken muss.
    Wie könnte ich dieses Problem lösen??
    hier mal der Code:

    HTML-Quellcode

    1. <html lang="en">
    2. <head>
    3. <meta charset="utf-8" />
    4. <title>multitab</title>
    5. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    6. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    7. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    8. <link rel="stylesheet" href="/resources/demos/style.css" />
    9. <script>
    10. var objDrag = null; // Element, über dem Maus bewegt wurde
    11. var mouseX = 0; // X-Koordinate der Maus
    12. var mouseY = 0; // Y-Koordinate der Maus
    13. var offX = 0; // X-Offset der Maus zur linken oberen Ecke des Elements
    14. var offY = 0; // Y-Offset der Maus zur linken oberen Ecke des Elements
    15. IE = document.all&&!window.opera;
    16. DOM = document.getElementById&&!IE;
    17. function init(){
    18. document.onmousemove = doDrag;
    19. document.onmouseup = stopDrag;
    20. }
    21. function startDrag(objElem) {
    22. objDrag = objElem;
    23. offX = mouseX - objDrag.offsetLeft;
    24. offY = mouseY - objDrag.offsetTop;
    25. }
    26. function doDrag(ereignis) {
    27. mouseX = (IE) ? window.event.clientX : ereignis.pageX;
    28. mouseY = (IE) ? window.event.clientY : ereignis.pageY;
    29. if (objDrag != null) {
    30. objDrag.style.left = (mouseX - offX) + "px";
    31. objDrag.style.top = (mouseY - offY) + "px";
    32. window.status = "Box-Position: " + objDrag.style.left + ", " + objDrag.style.top;
    33. }
    34. }
    35. function stopDrag(ereignis) {
    36. objDrag = null;
    37. }
    38. $(function() {
    39. $( "#divID2" ).resizable();
    40. });
    41. </script>
    42. <style type="text/css">
    43. .isResizable {
    44. background: rgba(255, 0, 0, 0.2);
    45. font-size: 2em;
    46. border: 1px solid black;
    47. overflow: hidden;
    48. resize: both;
    49. width: 160px;
    50. height: 120px;
    51. min-width: 120px;
    52. min-height: 90px;
    53. max-width: 400px;
    54. max-height: 300px;
    55. }
    56. </style>
    57. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    58. <title>Div-Container mit Maus bewegen</title>
    59. <script language="JavaScript" src="drag_drop.js" type="text/javascript"></script>
    60. </head>
    61. <body onload="init();" >
    62. <div id="divID2" style="width:150px; height:150px; border: 3px solid #000;" class="isResizable" onmousedown="startDrag(this);">
    63. Zweite Box!
    64. </div>
    65. </body>
    66. </html>

    Ich habe das Script auch hochgeladen, unter der URL webcrawler. bplaced. net / maus . php
    Ich hoffe ihr versteht das Problem und habt villeicht einen Lösungsansatz für mich?
    Vielen Dank schonmal.... :)
    Zwei Angaben des charset und body-onload, ernsthaft? Und dann teilweise XHTML, dann mal wieder HTML4, hier mal inline-style, da mal über den style-Tag, und dann der Code selbst... irgendwie macht das alles einen sehr zusammenkopierten Eindruck und ist nicht mal als Test ernst zu nehmen...

    Aber zu deiner Frage, ohne es probiert zu haben:
    Wenn du schon jQuery UI's resizable nutzt, warum nicht auch draggable?
    es ist auch großteils zusammenkopiert.
    Ein reines testscript....
    danke für den link...
    habe es jetzt gelöst :D

    HTML-Quellcode

    1. <html lang="en">
    2. <head>
    3. <meta charset="utf-8" />
    4. <title>jQuery UI Draggable - Default functionality</title>
    5. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    6. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    7. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    8. <link rel="stylesheet" href="/resources/demos/style.css" />
    9. <style>
    10. #draggable { width: 150px; height: 150px; padding: 0.5em; }
    11. </style>
    12. <script>
    13. $(function() {
    14. $( "#draggable" ).resizable();
    15. });
    16. $(function() {
    17. $( "#draggable" ).draggable();
    18. });
    19. </script>
    20. </head>
    21. <body>
    22. <div id="draggable" class="ui-widget-content">
    23. <p>Drag me around</p>
    24. </div>
    25. </body>
    26. </html>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „shutdown“ ()