cgicorner.ch

Informationen rund um Perl/CGI

Sie sind hier: Home > Forum
Yet Another Bulletin Board

Willkommen, Gast. Bitte Einloggen oder Registrieren.
21. Oktober 2021 um 04:18

Übersicht Übersicht Hilfe Hilfe Suche Suche Mitglieder Mitglieder Einloggen Einloggen Registrieren Registrieren
cgicorner.ch « Html: verschieben mit javascript per Maus »


   cgicorner.ch
   Hilfe
   HTML

   Html: verschieben mit javascript per Maus
« Kein Thema | Nächstes Thema »
Seiten: 1  Antworten Antworten Bei Antworten benachrichtigen Bei Antworten benachrichtigen Drucken Drucken
   Autor  Thema: Html: verschieben mit javascript per Maus  (Gelesen 2280 mal)
Karl_H.
YaBB Newbie
*



I love YaBB 1G - SP1!

   


Geschlecht: male
Beiträge: 12
Html: verschieben mit javascript per Maus
« am: 14. Februar 2016 um 21:06 »
Zitieren Zitieren Bearbeiten Bearbeiten

Hallo zusammen
 
Aus folgender Quelle habe ich ein Javascript als Grundlage.
 
[url]
http://tuts4you.de/88-programmieren/javascript/94-javascript-div-verschi eben
[/url]
 
Dieses Script ist darauf ausgelegt, HTML-Objekte | Elemente, auf Basis der  
Positionen, Verschiebungen mit der Maus vornehmen zu können.
 
Hier ein Beispiel:
Nachstehend sollen Gemüseprodukte per Maus, der richtigen Botanischen Gruppe zugeordnet werden.  
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>
<span style="position:absolute;top:100px;left:1200px;border-left:dotted 1px blue;height:600px">Liliengewächse</span>
<span style="position:absolute;top:100px;left:1400px;border-left:dotted 1px blue;height:600px">Nachtschattengewächse</span>

 
Code:

<div id="div1" style="position:absolute;left:200px;top:200px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Kohlrabi</div>
<div id="div2" style="position:absolute;left:200px;top:250px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Kartoffel</div>
<div id="div3" style="position:absolute;left:200px;top:300px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Radieschen</div>
<div id="div4" style="position:absolute;left:200px;top:350px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Rotkohl</div>
<div id="div5" style="position:absolute;left:200px;top:400px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Tomaten</div>
<div id="div6" style="position:absolute;left:200px;top:450px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Feldsalat</div>

 
Gemäss obigem Link habe ich mir ein solches Script geschrieben.
Die Verschiebung per Maus funktioniert einwandfrei.
 
 
Nachdem per Mausverschiebung, alle Gemüsearten, dem richtigen
Botanischen Namen zugeordnet wurden, haben wir eine sogenannte
Klassifizierung von Gemüsearten vorgenommen.
Diese neue Einteilung/Klassifizierung, möchten wir natürlich abspeichern können.
 
Mit "Element untersuchen (Q)" können wir am Browser selber schon mal
den neu entstandenen Quelltext anschauen, markieren/kopieren und  
in einem anderen Zielort einfügen.
 
Die Gemüsearten haben nun den Positionswert (left:xxxx) vom Botanischen Namen.
 
Code:

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

 
 
Gesucht ist, eine Methode, nach diesem Prinzip, einen speicherfähigen
Ablauf/Methode zu finden.
 
- Mausverschiebung von Text-Positionswert (span/dt/div/p etc)
- Kartesich X/Y
- Browserbasiert    
 
Mit freundlichen Grüssen
 
Karl_Heg  
gespeichert
cgicorner.ch
YaBB Administrator
*****




Board Admin

   
Homepage E-Mail

Geschlecht: male
Beiträge: 790
Re: Html: verschieben mit javascript per Maus
« Antworten #1 am: 24. Februar 2016 um 20:26 »
Zitieren Zitieren Bearbeiten Bearbeiten

Hallo Karl
 
Hast du eine URL, wo man deine bisherigen Ergebnisse mal sehen kann? Die etwas aus dem Zusammenhang gerissenen Beispiel Codeschnippsel sind mir nicht ganz klar...
 
Gruss
Jürg
gespeichert

cgicorner.ch - Informationen rund um Perl/CGI
Jürg Sommer
Karl_H.
YaBB Newbie
*



I love YaBB 1G - SP1!

   


Geschlecht: male
Beiträge: 12
<htmlRe: Html: verschieben mit javascript per M
« Antworten #2 am: 24. Februar 2016 um 23:59 »
Zitieren Zitieren Bearbeiten Bearbeiten

Hallo Jürg
 
Anbei die vollständige HTML-Datei mit dem Javascript.
 
Code:

<html>
<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}
</style>
<script type="text/javascript">
var currentObj = null;
var currentObjX = 0;
var curtrentObjY = 0;
 
var startX = 0;
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){
currentObj = null;
}
</script>
</head>
<body>
<div style="position:absolute;left:75px;top:75px;height:750px;width:80%" id="ViewBox">
<p>proto/S P E C I M E N Prüfungsaufgabe Botanik/de: Karl Hegetschweiler 94116 Hutthurm-Germany/Lektion: programmieren mit Javascript</p>
<p>Verschiebe nachstehende Produkte mit der Maus, zur richtigen Botanischen Familie (Spalte) </p>
 
 
<span style="position:absolute;top:150px;left:200px;border-left:dotted 1px blue;height:600px;padding-left:5px;font-size:18t"><b>Produkte | Familie</b></span>
<span style="position:absolute;top:150px;left:400px;border-left:dotted 1px blue;height:600px;padding-left:5px;">Doldengewächse</span>
<span style="position:absolute;top:150px;left:600px;border-left:dotted 1px blue;height:600px;padding-left:5px;">Baldriangewächse</span>
<span style="position:absolute;top:150px;left:800px;border-left:dotted 1px blue;height:600px;padding-left:5px;">Kreuzblütler</span>
<span style="position:absolute;top:150px;left:1000px;border-left:dotted 1px blue;height:600px;padding-left:5px;">Korbblütler</span>
<span style="position:absolute;top:150px;left:1200px;border-left:dotted 1px blue;height:600px;padding-left:5px;">Liliengewächse</span>
<span style="position:absolute;top:150px;left:1400px;border-left:dotted 1px blue;height:600px;padding-left:5px;">Nachtschattengewächse</span>
<div id="div1" style="position:absolute;left:200px;top:200px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Kohlrabi</div>
<div id="div2" style="position:absolute;left:200px;top:250px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Kartoffel</div>
<div id="div3" style="position:absolute;left:200px;top:300px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Radieschen</div>
<div id="div4" style="position:absolute;left:200px;top:350px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Rotkohl</div>
<div id="div5" style="position:absolute;left:200px;top:400px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Tomaten</div>
<div id="div6" style="position:absolute;left:200px;top:450px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Feldsalat</div>
<div id="div7" style="position:absolute;left:200px;top:500px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Lauch</div>
<div id="div8" style="position:absolute;left:200px;top:550px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Chicoree</div>
<div id="div9" style="position:absolute;left:200px;top:600px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Endivien</div>
<div id="div10" style="position:absolute;left:200px;top:650px;width:200px;height:100px;p adding:10px;" onmousedown="startDrag(this);">Zwiebel</div>
</div>
<div style="position:absolute;left:75px;top:800px;width:80%;height:100px;padd ing:10px;color:blue">
<dt style="color:blue">Provisorische Lösung zur Weiterverarbeitung:</dt>
<dt style="color:blue">Nachdem alle Produkte verschoben sind, gehe zu: rechte Maustaste: Element untersuchen (im Browser): Alles markieren/kopieren </dt>
<dt style="color:blue">Einfügen des neuen Quelltextes (neues Dokument): Die neuen Positionswerte entsprechen jetzt der richtigen Botanischen Familie (Spaltenwert: left:----px)</dt>
<dt style="color:maroon">Programming description:</dt>
<dt style="color:maroon">dragging text per mouse (javascript), can be comfortable</dt>
<dt style="color:maroon">On the user side, a storage option should be given (Result document).</dt>
<dt style="color:maroon">Operating system independence must be given</dt>
<dt style="color:maroon">Browser Based: desirable</dt>
<dt style="color:red">FireFox/IE/Opera, laufen auf Win7 als .exe-Datei! Das DOM-Result (Element untersuchen: kann das Endresultat ausweisen!) Genau dieses müsste per Speichertechnik aufgefangen werden können</dt>
<dt style="color:red">Der Vorteil einer Browser-basierten, Betriebssystem unabhängigen Lösung, hätte schon seinen Vorteil- und Existenzberechtigung</dt>
<dt style="color:blue; font-size16;font-weight:bold">Ich möchte International Daten und Anwendungen austauschen können und nicht durch IBM;Microsoft;Linux;Apple, etc. in meinem Vorhaben gehindert werden.</dt><br/>
<br/>
<br/>
</div>
</body>
</html>

 
Hoffe, dass diese Angaben weitere Transparenz verschaffen.
 
Mit freundlichem Gruss
 
Karl_H
gespeichert
Seiten: 1  Antworten Antworten Bei Antworten benachrichtigen Bei Antworten benachrichtigen Drucken Drucken

« Kein Thema | Nächstes Thema »

cgicorner.ch » Powered by YaBB 1 Gold - SP3!
YaBB © 2000-2004. All Rights Reserved.