Drag & Drop functionality with Php & jquery

Sharing is caring!

The capacity to move and customize content on a page and have it safeguard the request can make for an extraordinary client interface and is really generally simple to execute with a couple of lines of jquery. You’ll have to incorporate the jquery client interface library which you can find here: Jquery Google Api. All the records would have done well to get this up and running are in the download at the lowest part of this post.

In this exercise we’re set to be taking a gander at 2 fundamental Php pages. the index.php page which holds the substance and purpose to perform the customizable and the updatelist.php record which is a modest bit of code to upgrade the listorder section in the database utilizing Php and Mysql. Furthermore you will add your database portions to the connect.php document in the download area.

$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});

}, 2000);}

$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: ‘move’, update: function() {

var order = $(this).sortable("serialize") + ‘&update=update’;
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown(‘slow’);
slideout();
});
}
});
});

});

Here’s a rundown of whats going ahead in the code above.

To begin with we have a basic capacity that will slide up the “reaction” div which holds the message once the information is recovered in the database.

We then move to the area that empowers us to move and customize the cases. we then set the variable “request” which holds the information to be presented through ajax on our database overhaul script.

When the ajax appeal has been executed we then show the reaction in the div #response

This is the area in the index.php page that recovers the effects from the database in the right request.

Download Files

Leave a Reply

Your email address will not be published. Required fields are marked *

Got Project on mind? Let's ConnectContact Us

Secured By miniOrange