Diagrammerstellung - GUI in HTML und JS

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Diagrammerstellung - GUI in HTML und JS

    Guten Tag erstmal!

    Ich schreibe zur Zeit ein Programm welches mir ein Diagramm via Weboberfläche zusammenklickbar sein soll. Damit das richtig verstanden wird, der User soll sich nur die Struktur zusammenklicken können, die Daten sind dafür da.

    Ich stehe vor dem Problem das ich die Kästchen nicht ausgelesen bekomme, und somit nicht erfahre wo der User welchen Graph hingezogen hat.

    [Blockierte Grafik: http://mbrauner.de/diagrammerstellungserklaerung.jpg]
    Zur Erklärung des Bildes:
    1. Wenn hier geklickt wird, wird eine Y-Achse eingefügt (7)
    2. Wenn dies checked ist, werden Säulen gestapelt.
    3. Beim klicken hierdrauf, werden die eingefügten Y-Achsen "festgesetzt" und die graphen (8) können bewegt werden
    4. Wenn die Graphen durch klicken (hier auf die 4) gesetzt werden, kann gespeichert werden durch Klicken auf die 5
    5. Hiermit kann gespeichert werden. Es sollen sämtliche Positionen ausgelesen werden und in ein Textfeld geparst werden, welches dann submitted wird.
    6. Dies ist die Diagrammfläche inklusive der X-Achse.
    7. Dies sind einzelne Y-Achsen
    8. Dies sind einzelne Graphen
    9. In diesem Feld darf gearbeitet werden.


    Wenn Punkt 3 geklickt wird, blendet er sich aus, und 4 blendet ein, sowie 8.
    Wenn Punkt 4 geklickt wird, blendet er sich und 8 aus, und 5 blendet ein.

    Mithilfe von JQuery habe ich die 6+7 Sortable gemacht, bei 6 ist die besonderheit, das dieser nicht direkt bewegt werden kann.
    Die 8 Ist Draggable und wird immer nach unten zurückgeworfen, falls es nicht in einer 7 abgelegt wird.

    Ich hoffe ihr habt Ideen wie ich dies lösen könnte.

    Hier dann noch der Quelltext.

    Quellcode

    1. <html>
    2. <head>
    3. <title>Test Seite</title>
    4. <link rel="stylesheet" href="/jqueryui/css/custom-theme/jquery-ui-1.8.13.custom.css">
    5. <style type="text/css">
    6. .yAchse {
    7. border: 1px solid black;
    8. height: 150px;
    9. width: 100px;
    10. display: inline-block;
    11. }
    12. .graph {
    13. border: 1px solid black;
    14. height: 50px;
    15. width: 50px;
    16. float: left;
    17. }
    18. </style>
    19. <script src="test.jquery.js"></script>
    20. <script src="/jqueryui/js/jquery-ui-1.8.13.custom.min.js"></script>
    21. <script type="text/javascript">
    22. var counter=0;
    23. /*
    24. * Diese Funktion fuegt einen DIV-Container hinzu, welcher eine Y-Achse repraesentiert
    25. */
    26. function addYachse(){
    27. var yAchseHtmlCode="<div class=\"yAchse\" id=\"yachse"+counter+"\">Y-Achse "+counter+"</div>";
    28. var htmlCodeYet=document.getElementById("main").innerHTML;
    29. document.getElementById("main").innerHTML=htmlCodeYet+yAchseHtmlCode;
    30. $( ".yAchse" ).sortable({ scroll: false, axis: "x", appendTo: "#main" }).disableSelection();
    31. counter++;
    32. }
    33. /*
    34. * Hier wird der Link fuer die addYachse-Funktion ausgeblendet
    35. * und
    36. * das sortable deaktiviert
    37. * zusaetzlich wird die enableDragAndDrop - Funktion aufgerufen
    38. */
    39. function disableAdgraphYachse(){
    40. $( "#yAchsenGesetzt" ).hide();
    41. $( "#addYachse" ).hide();
    42. $( "#graphenGesetzt" ).show();
    43. $( "#main" ).sortable({disabled: true});
    44. $( ".yAchse" ).sortable({disabled: true});
    45. var yAchsen=this.getElementsByClass("yAchse",document.getElementById("main"),"div");
    46. for(var i=0;i<yAchsen.length;i++){
    47. yAchsen[i].style.border="1px solid #a6a6a6";
    48. yAchsen[i].style.color="#a6a6a6";
    49. }
    50. enableDragAndDrop();
    51. }
    52. /*
    53. * Hier werden die Felder der einzelnen verfuegbaren Graphen draggable
    54. * gemacht und zusaetlich der Link fuer das grapherGesetzt angezeigt
    55. */
    56. function enableDragAndDrop(){
    57. $( ".graph" ).draggable({revert: "invalid", cursorAt: {cursor: "move", top: 0, left: 0}}).disableSelection();
    58. $( ".yAchse" ).droppable({ accept: ".graph" });
    59. $( "#graphKasten" ).show();
    60. }
    61. /**
    62. * Hier wird das DragAndDrop deaktiviert und die Speicher Funktion aufgerufen
    63. */
    64. function disableDragAndDrop(){
    65. $( "#graphenGesetzt" ).hide();
    66. $( "#save" ).show();
    67. $( ".graph" ).draggable({disabled: true});
    68. }
    69. function speichern(){
    70. var graphen=this.getElementsByClass("graph",document.getElementById("graphKasten"),"div");
    71. var yAchsen=this.getElementsByClass("yAchse",document.getElementById("main"),"div");
    72. alert("graphen.length: "+graphen.length+"\n"+"yAchsen.length: "+yAchsen.length);
    73. for(var k=0;k<yAchsen.length;k++){
    74. alert(yAchsen[k].id+"left: "+yAchsen[k].style.left);
    75. for(var i=0;i<graphen.length;i++){
    76. alert(graphen[i].id+"left: "+ graphen[i].style.left);
    77. }
    78. }
    79. }
    80. /*
    81. * Diese Funktion ist analog zur JavaScript-Funktion getElementById
    82. * sucht, aber anhand von des css-Klassennamens nach den Elementen
    83. * @param searchClass - ist zwingend erforderlich, grenzt die Auswahl auf eine css-Klasse ein
    84. * @param domNode - grenzt die Auswahl auf einem bestimmten Knoten ein, bei null wird 'document' genommen
    85. * @param tagName - grenzt die Auswahl auf TagNames ein, bei null wird '*' genommen
    86. */
    87. function getElementsByClass( searchClass, domNode, tagName) {
    88. if (domNode == null) domNode = document;
    89. if (tagName == null) tagName = '*';
    90. var el = new Array();
    91. var tags = domNode.getElementsByTagName(tagName);
    92. var tcl = " "+searchClass+" ";
    93. for(i=0,j=0; i<tags.length; i++) {
    94. var test = " " + tags[i].className + " ";
    95. if (test.indexOf(tcl) != -1)
    96. el[j++] = tags[i];
    97. }
    98. return el;
    99. }
    100. </script>
    101. </head>
    102. <body>
    103. <a id="addYachse" onclick="javascript:addYachse();">
    104. <font style="color:blue;text-decoration:underline;">Y-Achse hinzuf&uuml;gen</font>&nbsp;-&nbsp;
    105. </a>
    106. <input type="checkbox" name="saeulenStapeln" id="saeulenStapeln">
    107. S&auml;ulen stapeln&nbsp;-&nbsp;
    108. <a id="yAchsenGesetzt" onclick="javascript:disableAdgraphYachse()" style="color:blue;text-decoration:underline;">
    109. Y-Achsen gesetzt
    110. </a>
    111. <a id="graphenGesetzt" onclick="javascript:disableDragAndDrop()" style="\"color:blue;text-decoration:underline;">
    112. Graphen gesetzt
    113. </a>
    114. <a id="save" onclick="javascript:speichern()" style="display: ;color:blue;text-decoration:underline;">
    115. Speichern
    116. </a>
    117. <br>
    118. <div id="main" style="border:1px solid red; height:350px;">
    119. <div id="diagramm" style="border:1px solid blue; height:150px; display:inline-block; background-color: #e0e0e0; color: #505050; margin: 5px; padgraph: 5px;">
    120. Diagrammfl&auml;che
    121. </div>
    122. </div>
    124. <div id="graphKasten" style="border: 0px solid black;">
    125. <div id="graph1" class="graph">
    126. graph 1
    127. </div>
    128. <div id="graph2" class="graph">
    129. graph 2
    130. </div>
    131. <div id="graph3" class="graph">
    132. graph 3
    133. </div>
    134. <div id="graph4" class="graph">
    135. graph 4
    136. </div>
    137. </div>
    138. <script type="text/javascript">
    139. $(function() {
    140. $( "#main" ).sortable({cancel: "#diagramm"}).disableSelection();
    141. });
    142. </script>
    143. </body>
    144. </html>
    Alles anzeigen


    Benötigt werden: Jquery + JQuery UI (bei beiden muss der Pfad angepasst werden)

    Ich danke schonmal!!
    Rechtschreibfehler sind ein Gimmick meiner TAstatur

  • Hi, ich habe das mal versucht nachzuvollziehen.
    Also fügt ein paar Y-Achsen hinzu, Klickt auf Y-Achen gesetzt, dann kann man Graphen in die Achsen ziehen. Und dort liegt das Problem, dass du keinen Event triggern kannst, dass der Graph abgelegt wurde.
    Was hast du denn versucht? Nachdem du die Y-Achsen setzt, kannst du die Elemente doch zu droppables machen, oder?