Drag & Drop Html5

Seiten: 1, 2
stoerchu
Verfasst am: 23.10.2015 um: 20:57 Uhr
 
Cw Guru
King
Beiträge: 802
SPAM:
0% Spam
Hallo

Ich habe wieder einmal eine etwas spezielle Frage: ich habe folgenden Code, der eigentlich recht gut funktioniert:


<script>

var dragSrcEl = null;


/* Drag&Drop beginnt */

function handleDragStart(e) {

// Source ELemente

dragSrcEl = this;


e.dataTransfer.effectAllowed = 'move';

e.dataTransfer.setData('text/html', this.innerHTML);

}


function handleDragOver(e) {

if (e.preventDefault) {

e.preventDefault(); // Deaktiviert die Standardreaktion des Browsers. Dadurch wird das "Drop" möglich.

}


e.dataTransfer.dropEffect = 'move'; // Drag & Drop mit Verschiebung

/*

Mögliche Werte:

copy: A copy of the source item is made at the new location.

move: An item is moved to a new location.

link: A link is established to the source at the new location.

none: The item may not be dropped.

*/


return false;

}


/* Verschieben beginnen */

function handleDragEnter(e) {

// gestrichelte Umrandung des Elements hinzufügen

this.classList.add('over');

}


/* Verschiebung aufhören */

function handleDragLeave(e) {

// gestrichelte Umrandung des Elements aufheben

this.classList.remove('over');

}


/* Maus auf Ziel losgelassen */

function handleDrop(e) {


// Stopppt die Standardfunktionalität des Browsers, notwendig für Firefox

if (e.preventDefault) {

e.preventDefault();

}


if (dragSrcEl != this) {

// Bilder austauschen

dragSrcEl.innerHTML = this.innerHTML;

this.innerHTML = e.dataTransfer.getData('text/html');

}


return false;

}


// wird am Ende aufgerufen

function handleDragEnd(e) {


// Umrandung entfernen

[].forEach.call(cols, function (col) {

col.classList.remove('over');

});

}


// Füge zu jedem Bild alle DnD Events hinzu.

var attribute_values = document.querySelectorAll('#attribute_values .dice_value');

[].forEach.call(attribute_values, function(dice_value) {

dice_value.addEventListener('dragstart', handleDragStart, false);

dice_value.addEventListener('dragenter', handleDragEnter, false)

dice_value.addEventListener('dragover', handleDragOver, false);

dice_value.addEventListener('dragleave', handleDragLeave, false);

dice_value.addEventListener('drop', handleDrop, false);

dice_value.addEventListener('dragend', handleDragEnd, false);

});

</script>



<div class="row">

<div class="small-2 columns" style="border: 1px solid #666666;">Alpha</div>

<div class="small-2 columns" style="border: 1px solid #666666;">Beta</div>

<div class="small-2 columns" style="border: 1px solid #666666;">Gamma</div>

<div class="small-2 columns" style="border: 1px solid #666666;">Delta</div>

<div class="small-2 columns" style="border: 1px solid #666666;">Epsilon</div>

<div class="small-2 columns" style="border: 1px solid #666666;">Zeta</div>

</div>

<div class="row" id="attribute_values">

<div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">1</div>

<div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">2</div>

<div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">3</div>

<div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">4</div>

<div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">5</div>

<div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">6</div>

</div>



Das Script funktioniert auch soweit wunderbar. Es werden in einer Art Tabelle (ich verwende hier ein Grid) zuerst jeweils Oben "Alpha", "Beta" usw. aufgelistet (inline) und darunter kommen jeweils die Zahlen 1, 2, 3 usw. Jetzt kann man mit diesem Script wunderbar die Zahlen untereinander vertauschen (mittels Drag & Drop)

Ich möchte das Ganze anschliessend an ein PHP-Script senden. Es muss irgendwie ersichtlich sein, welcher Wert unter "Alpha", "Beta" usw. steht. normalerweise würde ich einfach ein Formular verwenden, aber dies geht leider in diesem Fall nicht, oder ich mache irgendwie einen Denkfehler.
Das einzige, was mir hier einfällt, ist jweils beim Drop ein Ajax-Request zu starten, der die Zahl übermittelt, aber ich möchte eigentlich nur einmal am Schluss alle Werte zusammen an ein PHP-Script übergeben zur Überprüfung.

Hat hier irgend jemand eine Idee oder einen Lösungsansatz?






mit vielen Grüssen stoerchu


 



bw5rws
Verfasst am: 24.10.2015 um: 08:30 Uhr
 
Cw Guru
King
Beiträge: 945
SPAM:
0% Spam
Wenn du statt Divs ein Table benutzt habe ich eine fertige Loesung.
Falls du kein jQuery benutzt,msst du zuerst //cdn.bw5rws.tk/js/jquery.js einbinden.
So aehnlich wird es dann bei mir benutzt: https://bw5rws.tk/codeshare/?id=126
Das,was du nicht brauchst,habe ich bereits entfernt.
Du musst es selbst noch so umbauen,dass es bei dir funktioniert.
Ich hoffe,ich konnte helfen.

 

stoerchu
Verfasst am: 24.10.2015 um: 09:25 Uhr
 
Cw Guru
King
Beiträge: 802
SPAM:
0% Spam
hm... soweit ich das getestet habe handelt es sich hier um einen Upload. Das möchte ich eigentlich gar nicht haben, auch wenn er gut zu funktionieren scheint.

sagen wir ich habe eine Tabelle:

Alpha | Beta | Gamma | Delta | Epsiolon | Zeta
--------------------------------------------------------------
-- 1 -- | -- 2 - | --- 3 ---- | -- 4 -- | ---- 5 ---- | - 6


Ich möchte nun einfach unten die Zahlen verschieben, oben bleibt gleich. Beispielsweise möchte ich die 4 mit der 2 tauschen. Dies funktioniert auch wunderbar mit der Html5 API, aber ich kann das Reultat nach der Verschiebung noch nicht spiehcern.
Im Moment versuche ich dies mit Ajax zustande zu bringen, bin aber leide rnoch nicht am Ziel angelangt.




mit vielen Grüssen stoerchu


 

a-kuller
Verfasst am: 24.10.2015 um: 11:45 Uhr
 
Dr. CwCity.de
Community God
Beiträge: 4111
SPAM:
0% Spam
Bin jetzt nicht im Thema drin, aber spielt es keine Rolle ob es nu eine Tabelle oder div ist? Über children kann ich doch immer die Sub Elemente ermitteln ... 2 Schleifen, eine über die Bezeichnungen und eine über die Zahlen, beides in ein JSON reinschieben und absenden.

Mit freundlichen Grüßen

A. Kuller

bzw. UNO-Verbund

Keine Schuld ist dringender, als die, Dank zu sagen.
Cicero

 

stoerchu
Verfasst am: 24.10.2015 um: 11:52 Uhr
 
Cw Guru
King
Beiträge: 802
SPAM:
0% Spam
Ja so werde ich das auch machen, allerdings habe ich noch wenig Erfahrung mit Javascript, da ich mich lange Zeit geweigert habe dieses auf Webseiten zu verwenden, um Inkompatibilitäten zu vermeiden.

Ich habe mich in letzter Zeit etwas intensiver mit Html5 befasst und möchte mich nun mehr mit JavaScript beschäftigen, um "bessere" Funktionen auf der Webseite anbieten zu können.

Ich dachte nur, vielleicht gibt es eine Lösung, an die ich nocht nicht gedacht habe, aber ich werde wohl oder übel Ajax verwenden "müssen". 




mit vielen Grüssen stoerchu


 

a-kuller
Verfasst am: 24.10.2015 um: 11:56 Uhr
 
Dr. CwCity.de
Community God
Beiträge: 4111
SPAM:
0% Spam
Ajax benötigst du nicht unbedingt, du kannst JSON auch über ein Formular versenden lassen. Es ist ja nur ein Format um Daten auszutauschen. Verwende auf manchen Seiten JSON in einem normalen Formular um Bestellungen abzusenden und gleich zur richtigen Seite zu gelangen. Eine Tabelle gescheit zu senden ist mit normalen Parametern mehr wie unbequem. So verarbeitet der Client die Daten gleich in das richtige Format, ich Prüfe die ermittelte Summe mit dem Inhalt und schreibe es 1:1 in die DB.

Mit freundlichen Grüßen

A. Kuller

bzw. UNO-Verbund

Keine Schuld ist dringender, als die, Dank zu sagen.
Cicero

 

stoerchu
Verfasst am: 24.10.2015 um: 12:17 Uhr
 
Cw Guru
King
Beiträge: 802
SPAM:
0% Spam
hm... das würde mich jetzt wirklich interessieren, wie du das bewerkstelligst. Am besten wäre es nämlich für micht, bis am Schluss mit der Übertragung zu warten und erst dann die zugeordneten Werte an den Server zu übermitteln.

Ich habe jeden Wert in einem "Container" mit einer eindeutigen id. Kann ich einfach die Werte auslesen aus diesen Containern und dann per POST an den Server übertragen, wenn ich einen Button drücke?
Dies mag sehr Basic sein, aber mit JavaScript hatte ich bisher eben wirklich sehr wenig am Hut.

sagen wir mal:

<div id="container_1">11</div>
<div id="container_2">15</div>
<div id="container_3">19</div>
<button type="button">Senden</button>


Ich möchte nun eigentlich die innerHtml aus diesen 3 Containern auslesen und auf Knopfdruck an den Server übermitteln. Wie schaffe ich das? Ich finde dazu einfach nicht wirklich etwas im Internet...





mit vielen Grüssen stoerchu


 

a-kuller
Verfasst am: 24.10.2015 um: 12:22 Uhr
 
Dr. CwCity.de
Community God
Beiträge: 4111
SPAM:
0% Spam
Besser wäre es wenn du eine klasse Container erzeugst und anschließend über diese rüber springst (also alle Einträge erhältst)[$.each/jQuery]. Dann würde ich den Namen am "_" auftrennen, somit habe ich die ID, den Wert kannst du mit .text() [jQuery] ermitteln, diese würde ich jetzt in ein JSON reinschmeißen und mit den anderen ebenso verfahren. Nachdem das JSON fertig gebaut wurde in ein normales Textfeld werfen und senden lassen [JSON.stringify].

Mit freundlichen Grüßen

A. Kuller

bzw. UNO-Verbund

Keine Schuld ist dringender, als die, Dank zu sagen.
Cicero

 

a-kuller
Verfasst am: 24.10.2015 um: 12:25 Uhr
 
Dr. CwCity.de
Community God
Beiträge: 4111
SPAM:
0% Spam
Mit der Klasse Container meinte ich:
  


<div id="container_1" class="container">14</div>



Mit freundlichen Grüßen

A. Kuller

bzw. UNO-Verbund

Keine Schuld ist dringender, als die, Dank zu sagen.
Cicero



Letzte Änderung am: 24.10.2015 um: 12:27 Uhr durch: a-kuller
 

stoerchu
Verfasst am: 24.10.2015 um: 13:14 Uhr
 
Cw Guru
King
Beiträge: 802
SPAM:
0% Spam
hm... dann muss ich wohl doch die jQuery einbinden, hatte gehofft das mit der Html5 API bewerkstelligen zu können, aber jetzt habe ich zumindest den "richtigen" Ansatz gefunden.

Ich werde das JSON aber wohl in ein verstecktes Formularfeld schreiben lassen.





mit vielen Grüssen stoerchu


 

 
Seiten: 1, 2

Folgende User sind hier gerade aktiv:
-

ANZEIGE