coder101 coder101 - 7 months ago 32
SQL Question

drag and drop values from one div to another div and mysql queries after dropping

this would be my first time for a drag and drop functionality. i have to make timetable application for a college which would require dragging from a list of teacher responsibilities on the left side containing all the required values and dropping into a timetable slot on the right side, then popping up a dialog box for asking room number and then performing various checks at php and mysql level and then finally inserting into database. Also, without mentioning this has to be an ajax solution.

I really want this to be a pure javascript solution and not some frameworks like jquery, prototype etc as i have a race against time and i haven't ever used any frameworks before so i cant dish out time to learn one of these now. But if u guys cant help me with pure javascript, i'l have to use one of the above mentioned frameworks.

Please help as soon as possible. Also, do ask if u want some more clarification as to what exactly i want to achieve.

Answer

First Option is : In core javascript you can use using HTML5 drag drop feature but it has problems specially in safari browser.

Second Option is : http://jqueryui.com/sortable/#connect-lists

Put following code I'll tell you how to call ajax. I am still here to help you till you get expected output

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <style>
    #left, #right { border:1px solid #000000;min-height:100px;min-width:100px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
    #left li, #right li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function() {
        $( "#left, #right" ).sortable({
            connectWith: ".connectedSortable",
            receive: function(event,ui){
                 console.log("old ui id = "+ui.sender.attr("id")+" new ul id = "+this.id+" li id "+$(ui.item).attr("id"));                   
                 if(ui.sender.attr("id") != this.id)
                 {  
                    //Your ajax call will come here


                            $.ajax({
                    type: "POST",
                    url: "logic.php", 
         // Write you //php mysql logic here you'll get all your data in logic.php file 
                  data: { left: ui.sender.attr("id"), right: this.id , responsibility:$(ui.item).attr("id") }
                }).done(function( msg ) {
                              alert( "Data Saved: " + msg );
                            });
                 }
             }

        }).disableSelection();
    });
    </script>
</head>
<body>

<ul id="left" class="connectedSortable">
    <li id="1" class="ui-state-default">Item 1</li>
    <li id="2"  class="ui-state-default">Item 2</li>
    <li id="3"  class="ui-state-default">Item 3</li>
    <li id="4"  class="ui-state-default">Item 4</li>
    <li id="5"  class="ui-state-default">Item 5</li>
</ul>

<ul id="right" class="connectedSortable">
    <li id="6" class="ui-state-highlight">Item 1</li>
    <li id="7"  class="ui-state-highlight">Item 2</li>
    <li id="8"  class="ui-state-highlight">Item 3</li>
    <li id="9"  class="ui-state-highlight">Item 4</li>
    <li id="10"  class="ui-state-highlight">Item 5</li>
</ul>


</body>
</html>