drag-drop intre 2 tabele html

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
andras
Mesaje: 430

drag-drop intre 2 tabele html

Salut!
Am o rugaminte: am 2 tabele html in pagina curenta (stinga dreapta) cu date incarcate din BD. Cum mut o inregistrare din tabel stinga in tabel dreapta (si invers) cu drag si drop in jQuery?
As avea nevoie si de cite o coloana, prima coloana din fiecare tabel, pe care o pun eu si care nu depinde de datele din BD, si care se renumeroteaza automat in ambele tabele la fiecare miscare. Aceste 2 coloane care se renumeroteaza automat imi vor servi ulterior la salvarea in BD a noii pozitii a inregistrarii.
Aveti undeva un exemplu sau un link? Am vazut citeva pe net, dar mai bine intreb inainte un specialist.

MarPlo Mesaje: 4343
Salut
Nu am mai lucrat demult cu Drag si Drop, nu mai stiu exact ce trebuie, dar poate iti e de folos aceste tutoriale, daca vrei sa inveti cum se face codul pentru Drag-Drop:
- Drag si Drop cu jQuery UI
- Drag si Drop cu atribute HTML5.

Si un exemplu concret, cu 2 tabele: jQuery Drag and Drop Rows between two similar Tables

andras Mesaje: 430
Pot sa mut un bloc de inregistrari din stinga in dreapta (unidirectional) ? Adica: vreau sa pun in prima coloana din tabelul stinga thml un <input type="checkbox">, sa bifez apoi inregistrarile pe care doresc sa le mut, iar la actionarea unui buton acestea sa fie mutate in tabelul html din dreapta. Multumesc.

MarPlo Mesaje: 4343
E prea complicat mutarea in celalalt tabel cu un buton a randurilor cu checkbox bifat.
Nu ma bag nici ca idee.

andras Mesaje: 430
OK, ma gindesc sa fac un compromis: voi bifa checkbox-urile, iar cu butonul le salvez direct in baza de date, voi face reload page iar noile inregistrari (bifate in stinga) vor apare (dupa reload page) in tabelul din dreapta.

andras Mesaje: 430
Va urez Sarbatori fericite !

Intrebare: de ce linia din tabel html pe care vreau s-o mut (cu drag-drop) nu este vizibila in <div>-ul sursa, dar este vizibila in <div>-ul destinatie? Cele doua tabele sint in <div>-uri diferite. Functioneaza, dar nu vad ce mut decit cind ajung cu mouse in div-ul destinatie.

Cod: Selectaţi tot

$(document).ready(function() {	//tab1
  var $tabs = $('#t_draggable2');
   $('#t_draggable2').droppable({
    helper: "clone",
    accept: ".t_sortable tr",
     zIndex: "5000",    
    drop: function( event, ui ) {    	
   }
  });
  
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
     items: "> tr:not(:first)", 	
    appendTo: $tabs,
    helper:"clone",
     zIndex: "5000"
  }).disableSelection();
});
</script>
iar tabelele (simplificat):

Cod: Selectaţi tot

<div id="tb1_c" >
   <div id="a11">
       <table id="t_draggable1">
           <tbody class="t_sortable">
           </tbody>
       </table>
    </div>
   <div id="a12">
       <table id="t_draggable2">
           <tbody class="t_sortable">
           </tbody>
       </table>
    </div>
</div>

Subiecte similare