Announcement

Collapse
No announcement yet.

Klassifizierung: durch Maus-verschieben der Objekte | Elemente (position:absolute)

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Klassifizierung: durch Maus-verschieben der Objekte | Elemente (position:absolute)

    Stand-alone browser application: learning
    learning to program
    learning Javascript

    Hallo zusammen
    Wenn per Javascript Werte verändert werden, sind diese neuen Wert unter "Element untersuchen" im neuen Quelltext ausgewiesen.
    Ich suche nach Möglichkeiten, dieses sogenannte Result-Document, automatisiert zu speichern.

    Mit einem Javascript habe ich eine Klassifizierungsmethode in einem HTML-Dokument erstellt.
    Durch Verschiebung mit der Maus, können reale Objekte der richtigen Klasse/Kategorie zugbeordnet werden.
    In der HTML-Ansicht haben die zu bestimmenden Objekte vorerst alle die gleiche Ausgangslage (left:200px).

    Das Script basiert auf folgender Quelle!

    http://tuts4you.de/88-programmieren/...iv-verschieben

    HTML Code:
    <div id="div1" style="position:absolute;left:200px;top:200px;width:200px;height:100px;padding:10px;" onmousedown="startDrag(this);">Kohlrabi</div>
<div id="div2" style="position:absolute;left:200px;top:250px;width:200px;height:100px;padding:10px;" onmousedown="startDrag(this);">Kartoffel</div>
<div id="div3" style="position:absolute;left:200px;top:300px;width:200px;height:100px;padding:10px;" onmousedown="startDrag(this);">Radieschen</div>
<div id="div4" style="position:absolute;left:200px;top:350px;width:200px;height:100px;padding:10px;" onmousedown="startDrag(this);">Rotkohl</div>
<div id="div5" style="position:absolute;left:200px;top:400px;width:200px;height:100px;padding:10px;" onmousedown="startDrag(this);">Tomaten</div>
<div id="div6" style="position:absolute;left:200px;top:450px;width:200px;height:100px;padding:10px;" onmousedown="startDrag(this);">Feldsalat</div>
    Im vorliegenden Fall, werden die Gemüsearten, der richtigen Botanischen Gruppe zugeordnet.

    HTML Code:
    <span style="position:absolute;top:100px;left:400px;border-left:dotted 1px blue;height:600px">Doldengewächse</span>
<span style="position:absolute;top:100px;left:600px;border-left:dotted 1px blue;height:600px">Baldriangewächse</span>
<span style="position:absolute;top:100px;left:800px;border-left:dotted 1px blue;height:600px">Kreuzblütler</span>
<span style="position:absolute;top:100px;left:1000px;border-left:dotted 1px blue;height:600px">Korbblütler</span>
    Der Anwender realisiert dies durch verschieben mit der Maus!
    Er muss die Kohlrabi, Radieschen und den Kohl in die Spalte der Kreuzblütler (left:800px) verschieben.

    Sind nun alle Objekte zugeordnet, kann das Resultat (neuer Quelltext) durch (Mausklick rechts: "Element untersuchen") kopiert werden.
    Somit haben wir eine Vorlage die per xslt/xml zur Weiterverwendung verarbeitet werden kann.

    Hier die result positionen für die Kreuzblütler! Alle haben left: >800px
    HTML Code:
    <div id="div1" style="position: absolute; width: 200px; height: 100px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; top: 137px; left: 803px;" onmousedown="startDrag(this);">Kohlrabi</div>
<div id="div3" style="position: absolute; width: 200px; height: 100px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; left: 801px; top: 165px;" onmousedown="startDrag(this);">Radieschen</div>
<div id="div4" style="position: absolute; width: 200px; height: 100px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; left: 801px; top: 195px;" onmousedown="startDrag(this);">Rotkohl</div>
    Klassifizierung_javascript.jpg

    Nun Die Kernfrage!

    Was für Ansätze kommen da in Frage (learning to program)?
    Vorliegendes Modell ist Koordinatenbasiert.
    Zugriff auf die neuen absoluten positionen (Das neue Wissen) zur Abspeicherung oder|und Weiterverarbeitung.

    Bin gerade am Anfang mit javascript.

    Viele Grüsse

    Karl_Heg
    Tags: None
  • #2
    Was für Ansätze kommen da in Frage (learning to program)?
    Keine.
    Javascript läuft clientseitig und kennt keine Dateiverarbeitung. Du kannst Daten zum Server senden und dort mit einer serverseitigen Sprache auf dem Server speichern.
    Auf der Grafik ist nichts zu erkennen und was die Überschrift und die Einleitung mit der Frage zu tun haben erschließt sich nicht.

    Schon mal eine Blick hierhin geworfen

    http://api.jquery.com/

    http://jqueryui.com/

    Draggable...
    Zuletzt editiert von Christian Marquardt; 14.02.2016, 20:02.
    Christian

    Comment

    • #3
      Stand-alone browser application: learning
      de: Das Programmieren von Browserbasierten Anwendungen lernen
      learning to program
      de: Das Programmieren lernen
      learning Javascript
      de: Javascript lernen

      Hallo Christian
      Anbei habe ich mich ein bisschen präziser Ausgedrückt, wer lernen will muss unten durch!

      Im Zuge meiner Demüstifizeirung über das Programmieren habe ich mich auf: kurz gesagt, "Webprogrammierung" festgelegt.
      Vorerst nur auf dem eigenen Rechner, mit XAMPP.
      Also sollte sich niemand daran empören, wenn ich mich dabei auf Perl/CGI festgelegt habe. Ich hab da schon meine Gründe.
      Vorerst will ich das Programmieren lernen und keine Webseiten entwickeln.

      Nun zu Javascript und meiner Anfrage über die Speichermöglichkeiten nach veränderten Werten!
      Mag sein dass das Klassifizierungsbeispiel über/mit "Gemüse", falsch und irreführend interpretiert ist.

      Eine Klassifizierungszuordnung über/mit "Gemüse" kann ich programmiertechnisch auch per:

      - DTD/XSD mit XML Editor
      - XML/XSLT
      - PERL/CGI
      - Access
      - usw.

      erstellen.


      Da ich nun Javascript dazulernen will, bin ich schon mal sehr dankbar für Deine Links.
      Die Zuordnung durch Verschieben mit der Maus ist für mich ein sehr effizienter Ansatz.

      Vorerst recht herzlichen Dank

      Karl_Heg













      Zwischenzeitlich

      Comment

      • #4
        Hier mein eigener Lösungsansatz: Teste selber und gib ein Urteil

        Hallo zusammen

        Anbei der Quelltext für den funktionsfähigen Lösungsansatz (Eigenbedarf).

        HTML Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<meta name="author" content="Karl Hegetschweiler/94116-Hutthurm/Germany" />
<meta name="description" content="botanical classification with JavaScript Mouse Move/dragging" />
<head>
<style type="text/css">
span {text-decoration:underline}
.new_sourse_code {color:blue;text-decoration:none}
.new_sourse_code_comment {color:green;text-decoration:none}
a {color:maroon;text-decoration:none}
</style>
<script type="text/javascript">
var currentObj = null;
var currentObjX = 55;
var curtrentObjY = 0;

var startX = 55;
var startY = 0;

//bool ob aktueller browser ein IE ist
var IE = document.all&&!window.opera;

document.onmousemove = doDrag;
document.onmouseup = stopDrag

function startDrag(obj){
currentObj = obj;
startX = currentObjX - currentObj.offsetLeft;
startY = currentObjY - currentObj.offsetTop;
}

function doDrag(ereignis) {
currentObjX = (IE)?window.event.clientX:ereignis.pageX;
currentObjY = (IE)?window.event.clientY:ereignis.pageY;

if(currentObj!=null){
currentObj.style.left=(currentObjX-startX)+"px";
currentObj.style.top=(currentObjY-startY)+"px";
}
}

function stopDrag(ereignis){
if (currentObj) document.getElementById('pos-'+currentObj.id).innerHTML=currentObjX+'|'+currentObjY;	// Position fuer Uebermittlung speichern
currentObj = null;
}
</script>
</head>
<body>
<div style="margin-left:50px;margin-top:25px;">
<div style="position:absolute;left:25px;top:15.00px;height:750px;" >
<dt style="font-weight:bold;font-size:16pt">proto/S P E C I M E N Prüfungsaufgabe Botanik/de: Karl Hegetschweiler 94116 Hutthurm-Germany/Lektion: programmieren mit Javascript</dt>
<dt>Zoom Browser Ansicht ca. 50% - 70%</dt>
<dt>Verschiebe nachstehende Produkte mit der Maus, zur richtigen Botanischen Familie (Spalte) </dt>
<dt>Mit Weiterverarbeitung unter XSLT kann nun anhand der pos. left ein Index für Klassifizierungszwecke erzeugt werden</dt>
<span style="position:absolute;top:100px;left:25px;border-left:dotted 1px blue;height:400px;padding-left:0px;font-size:18pt">Produkte | Familie<br/>left75</span>
<span style="position:absolute;top:100px;left:400px;border-left:dotted 1px blue;height:400px;padding-left:0.00px;">Doldengewächse<br/>(left-400px)</span>
<span style="position:absolute;top:100px;left:700px;border-left:dotted 1px blue;height:400px;padding-left:0.00px;">Baldriangewächse<br/>(left-700px)</span>
<span style="position:absolute;top:100px;left:1000px;border-left:dotted 1px blue;height:400px;padding-left:0.00px;">Kreuzblütler<br/>(left-1000px)</span>
<span style="position:absolute;top:100px;left:1300px;border-left:dotted 1px blue;height:400px;padding-left:0.00px;">Korbblütler<br/>(left-1300px)</span>
<span style="position:absolute;top:100px;left:1600px;border-left:dotted 1.00px blue;height:400px;padding-left:0.00px;">Liliengewächse<br/>(left-1600px)</span>
<span style="position:absolute;top:100px;left:1900px;border-left:dotted 1px blue;height:400px;padding-left:0.00px;">Nachtschattengewächse<br/>(left-1900px)</span>
<div id="div1" style="position:absolute;left:25px;top:200px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Kohlrabi <br/>(zu Kreuzblütler)</div>
<div id="div2" style="position:absolute;left:25px;top:250px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Kartoffel <br/>(zu Nachtschatten..)</div>
<div id="div3" style="position:absolute;left:25px;top:300px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Radieschen</div>
<div id="div4" style="position:absolute;left:25px;top:325px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Rotkohl</div>
<div id="div5" style="position:absolute;left:25px;top:350px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Tomaten <br/>(zu Nachtschattengewächs)</div>
<div id="div6" style="position:absolute;left:25px;top:400px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Feldsalat <br/>(zu Baldriangewächse)</div>
<div id="div7" style="position:absolute;left:25px;top:450px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Lauch</div>
<div id="div8a" style="position:absolute;left:25px;top:475px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Chicoree_a</div>
<div id="div8b" style="position:absolute;left:25px;top:500px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Chicoree_b</div>
<div id="div9" style="position:absolute;left:25px;top:525px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Endivien<br/>(zu Korbblütler left-1300px)</div>
<div id="div10" style="position:absolute;left:25px;top:575px;width:350px;height:100px;padding-left:5px;" onmousedown="startDrag(this);">Zwiebel <br/>(zu Liliengewächse)</div>
</div>

<!-- Direkt erzeugtes Resultat zum Kopieren/Einfügen und zur manuellen Speicherung für Weiterbverarbeitungszwecke -->
<div style="position:absolute;left:25px;top:650px;width:80%;height:100px;padding-left:5px;color:blue">
<a href="#description">Funktion: Cursor-Beschreibung</a>
<hr color="maroon" style="margin-top:10px"/>
<dt class="new_sourse_code_comment">&lt;!-- Direkt erzeugtes Resultat zum Kopieren/Einfügen und zur manuellen Speicherung für Weiterbverarbeitungszwecke --&gt;</dt>
<dt><span class="new_sourse_code">&lt;dt id="div1" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div1"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div2" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div2"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div3" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div3"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div4" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div4"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div5" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div5"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div6" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div6"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div7" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div7"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div8a" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div8a"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div8b" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div8b"></span><span class="new_sourse_code">px"/&gt;</span><br />
<dt><span class="new_sourse_code">&lt;dt id="div9" prototype="aktualisierte_pos" style="position:absolute;left:</span><span class="new_sourse_code" id="pos-div9"></span><span class="new_sourse_code">px"/&gt;</span><br />

<!-- Left und top-Wert als ID für xml Zwecke (Bsp: Zwiebel)-->
<dt><span class="new_sourse_code">&lt;specimen id="</span><span class="new_sourse_code" id="pos-div10"></span><span class="new_sourse_code">" class="Liliengewächse"/&gt;</span></dt><br />
<div id="description" style="page-break-before:always">
<p style="color:maroon;">Funktion: Cursor-Beschreibung</p>
<p style="color:maroon;">Die Mauspositionierung/Cursor-Position/anfassen, muss am Zeilen- respektive Wort-Anfang sein. siehe nachfolgende Beispiele
<br/>Kartoffel: bei Kart.... anfassen
<br/>Radieschen: bei Rad...... anfassen
<br/>usw.
<br/>Mache den Gegentest am Wortende oder Zeilen-Ende des zu verschiebenden Objektes! "unerwünschte Positionswerte"
</p>
</div>
<hr color="maroon" style="margin-top:10px"/>
</div>
</div>
</body>
</html>
        Möge der/die eine oder andere, einen Anreitz finden und daraus lernen. Von Anfänger für Anfänger!

        Mit freundlichem Gruss

        Karl_Heg

        Comment

        • #5
          Du solltest das überarbeiten
          Image1.jpg

          http://jqueryui.com/draggable/
          Zuletzt editiert von Christian Marquardt; 13.03.2016, 15:40.
          Christian

          Comment

          • #6
            Zielort Verschiebungen

            Hallo Christian

            Du hast die Produkte viel zu weit hinunter gezogen.

            Anbei eine Abbildung im Anhang, wohin verschoben wird.
            Im unteren Teil ist dann der neu erzeugte Quelltext (blau eingefärbt), zur weiteren Verarbeitung


            Gruss

            Karl_Heg
            Attached Files

            Comment

            • #7
              Was heisst ich hab sie zuweit runtergezogen?
              Entweder du programmierst oder nicht. Das die Element überall hingezogen werden können, kann ja nicht im Sinne des Erfinders sein. IDs die variabel sind ebenfalls nicht
              Und wenn du hier schon eine "Lösung" für alle zur Verfügung stellst, sollte sie auch Mindestanforderungen genügen. Draggen in einem vorgegebenen Bereich
              Zumal du ja das nicht mit JQuery machen willst, das 80% deines Codes obsolet macht.
              Christian

              Comment

              • #8
                Schon gut reg dich bloss nicht auf!

                Hauptsache für mich stimmt der Lösungsansatz.

                Werde mich hüten, in Zukunft Lösungsansätze ins Forum zu stellen.

                Gruss

                Karl_Heg

                Comment

                • #9
                  Warum sollte ich mich aufregen?
                  Wenn etwas Mist ist, darf das nicht mehr gesagt werden? Wenn du nicht kritikfähig bist, stelle deine Lösung nicht dar

                  Hauptsache für mich stimmt der Lösungsansatz.
                  Und für wen sollte er noch stimmen (können)? Abstrahiert? Du siehst den Unterschied zwischen deiner und der JQuery-Lösung nicht?
                  Universell anwendbar?

                  Des Weiteren:
                  Man soll auch noch am Zielpunkt das Ding pixelgenau fallenlassen?
                  Ein simples "einrasten" ist nicht möglich?
                  Wer macht so was?
                  Zuletzt editiert von Christian Marquardt; 26.03.2016, 22:04.
                  Christian

                  Comment

                  Previous template Next
                  Working...
                  X