How to save the results of a "drag-and-drop" in table?

Question

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.

Example of table http://associacaoeua.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 you to the desired day and time with:

draggable="true" ondragover="allowDrop(event)"  ondragstart="drag(event)">

when I release the discipline in a particular location I can get the code (ID) from it follows 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 in the bank using Ajax, what I can’t do is take the day and time of class. I’m just getting the ID of the class.

Once discipline is unleashed I must have in

function drop(ev) {

    *var id  : ja tenho.* 
    var dia : ex.. SEGUNDA.
    var hora: ex.. 6:10 a 7:40

}

How should I do it?

Answer 1

jQuery’s embedding allows two parameters in the drop function, the second is the dragged element, so you can try:

function drop(ev, ui) {
    var dropped = ui.draggable;
    var texto = dropped.innerText; // dá-lhe o texto do elemento arrastado
    var coluna = $(dropped).index(); // dá-lhe o numero da coluna a começar em zero
    var linha = $(dropped).closest('tr').index(); // dá-lhe o numero da linhaa começar em zero

And so, having the index of the row/column can fetch your text() with

var textoColuna = $('table tr:first td:eq(' + coluna + ')').text();
var textoLinha = $('table tr:eq(' + linha + ') td:first').text();

In fact, within the function drop() the this refers to the destination element, so it can be used:

var coluna = $(this).index(); 
var linha = $(this).closest('tr').index();

Example