Dałem się w drag and drop w HTML5 i trochę się pogubiłem.
Mam następujący kod:
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
alert(data); // dodałem od siebie i zwraca id produktu, które potrzebuje
}
Teraz trochę w skrócie cały formularz, ponieważ nie ma sensu przepisywać całego.
Oczywiście to jest w <form> itp.
<div class='left'>
<h3>Układ napędowy</h3>
<div id='text'>
<div id="drop1" name="drop1" value="1" class="dad" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<h3>Podwozie</h3>
<div id='text'>
<div id="drop5" name="drop5" value="1" class="dad" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<h3>Opony</h3>
<div id='text'>
<div id="drop9" name="drop9" value="1" class="dad" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
Dalej mam części, które należy przesunąć w odpowiednie okienko.
Jedna przykładowa taka część:
<img id="{$part.id}" src="/files/system/generation.php?load={$part.load}&typ={$part.typ}&name={$part.name}&level={$part.level}&price={$part.price}&wear={$part.wear}&part={$part.part}" draggable="true" ondragstart="drag(event)">
Nie zbytnio znam się na JS itp.
Nie za bardzo wiem jak z funkcji js drop(ev) gdzie mam odpowiednie id produktu wysłać to z powrotem do formularza w odpowiednie okienko, w które aktualnie przesuwam dany produkt (obrazek).
Może dane id jest przesyłane do formularza ale wtedy na pewno nie mogę tego odebrać za pomocą metody POST. Więc jak wysłać dane z div do POST?