to the point:
I have two tables next to each other.
One is filled with data (in this case, a table filled with names of all people working in a team).
The other one is empty. Now, I want to drag and drop the names (rows) in the other table, and on the drop, it triggers an insert-query to the database.
Also, the names in the first table, filled with data, always stays the same (as the list of names never change).
So, a little scheme:
Table filled with data coming from a database (drag)
Empty table (drop)
A name is being dragged from the first table to the second, and when dropped, an insert-query is issued to the database. On a refresh of the page, the dropped name will still be seen in the second table.
Oh, one more feature that optionally should be implemented: if I drag a name from the second table back to the first, the name should disappear (and as such drops the record from the table in the database). Drag and drop should be usable in both directions.
The code I already had, but is somehow not working:
$(document).ready(function() {
var $tabs = $('#EmptyTable')
$("tbody.t_sortable").sortable({
connectWith: ".t_sortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper:"clone",
zIndex: 999990
}).disableSelection();
var $tab_items = $(".nav-tabs > li", $tabs).droppable({
accept: ".t_sortable tr",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
<?
mysql_query("INSERT INTO emptyTable_team (name) values (<datafromfirsttable>)");
?>
return false;
}
});
});
Copyright License:
Author:「Kryptonous」,Reproduced under the CC 4.0 BY-SA copyright license with link to original source & disclaimer.
Link to:https://stackoverflow.com/questions/33837861/jquery-php-mysql-drag-n-drop-with-2-tables