I need to do a drag-and-drop that looks like the image below, which is the system I'm developing.
In the buttons referring to "1st Period", "2nd Period" and others, I put a function that returns the disciplines referring to the period informed.
table example http://associacaooeua.com.br/particular/img/horario.png code =
<td><type="button" onClick="disc('1');">1º Periodo</button></td>
I activated the drag on the return of the disciplines, so I can drag it to the desired day and time with:
draggable="true" ondragover="allowDrop(event)" ondragstart="drag(event)">
When I release the discipline in a certain place I can get its code (ID) Here is the code I used:
function drag(ev) {
revert:true,
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
//o id da disciplina esta na variavel data.
alert(data);
//data é o ID
}
I can save to the bank using Ajax, which I can not get is the day and time of class. I'm just getting the discipline ID.
Once the discipline is released I have to have it
function drop(ev) {
*var id : ja tenho.*
var dia : ex.. SEGUNDA.
var hora: ex.. 6:10 a 7:40
}
How should I do this?