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

Navigation
0

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?

    
asked by anonymous 10.02.2014 / 14:47

1 answer

1

jQuery documentation allows two parameters in the drop function, the second is the element dragged, 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 you can use: 

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

Example

    
10.02.2014 / 14:29
Error compiling ionic android app A problem occurred configuring project ': CordovaLib' Triggering CSS transition when performing ajax request