jQuery + PHP + MySQL: Drag 'n' Drop with 2 tables

2015-11-21T07:39:10

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:

  1. Table filled with data coming from a database (drag)

  2. 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

About “jQuery + PHP + MySQL: Drag 'n' Drop with 2 tables” questions

In CoffeeScript with jQuery, is there any difference for following statements? jQuery ($) -&gt; jQuery -&gt; $ - &gt;
Trying to include jquery and jquery-ui i get jQuery is not defined. My Rollup config "external": [ "./node_modules/dist/jquery.min.js", "./node_modules/jquery-ui-dist/jquery-u...
i want to use both jquery script in php page but both jquery script are conflicting to each others here my code &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/...
I am using JQuery tablesorter plug-in and JQuery dialog plug-in in my program and JQuery tablesorter plug-in is working properly but the JQuery dialog plug-in is not working properly. I have got t...
I have an HTML page with jQuery inside and JavaScript. I'm importing the libraries I need in the head tag: &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css"
I rather enjoy adding practical eye-candy to the networking community I've been developing but as things start to stack up I worry about load times. Is it truly faster to have users load (a hopefu...
I'm making a fairly simple mobile version for our website. It's not going to have every website option and the buttons I will be designing myself. For their functionality though, being pop up and s...
I am doing a site to view in mobile and have used the mobile css and jquery for the effects.i have used the below code for styles and effects. &lt;link rel="stylesheet" href="&lt;?=base_url()?&gt;...
jQuery.fn.jquery equivalent for jQuery Mobile? To programmatically check the version of jQuery one can simply use "jQuery.fn.jquery". Might there be a similar method available to return the Mobile
Is jQuery Mobile a lightweight version of original jQuery or jQuery UI? Is it a mobile version of jQuery? Whatever we can do with jQuery all possible with jQuery mobile? Will all jQuery selectors...

Copyright License:Reproduced under the CC 4.0 BY-SA copyright license with link to original source & disclaimer.