Simple script in PHP to drag and drop jQuery UI and store result in MySQL

Tags: jQuery , MySQL , PHP 21

Hello !

I was thinking, how much would drag and drop UI of jQuery help the people in pure designing aspect?, well… found out – not much!, until you use it with powerful scripting language, whats better then PHP ?.
Secondly, i thought if you can use PHP why not database to store it?. Behold!! here is the simple script to drag and drop the UI and store result in MySQL along with the help of PHP.

Include jquery library
Include jquery UI widget library, especially interactions.

Before i start , i would recommend you to learn this basic Drag & drop tutorial

Basic CSS to style our drag and drop UI

.content_box { 
  border:#00FFFF solid 1px; 
  font-family:Verdana, Arial, Helvetica, sans-serif;

.content_holder_box{ width:300px;
  height: 250px;
  border:#0099FF solid 1px;

  border:#0099FF solid 1px; 

  border:#99FF66 solid 1px;

.dropper{ width:270px;

  border:#999999 dashed 1px; 
  background:url(../images/darrow.jpg) center no-repeat;

//you can show arrow image to suggest where user has to drop selected UI.

Create index.php and write a simple drag environment , i have created a static one, you can create a dynamic drag environment, for example shopping cart elements from database.

<div class="content_box" id="content_box_drag" onMouseOver="drag();"> Drag label
for($i=0; $i<5;$i++)
    echo "<p class='dragelement' id='dragelement_$i'>Ferrari_$i</p>";
<div class="content_holder_box" id="content_box_drop">Drop here
<p class="dropper"></p>
<div style="clear:both;"></div>
<div id="search_result"></div>
  • id “content_box_drag” is a static draggable environment.
  • initialize drag() function on mouse hover , to prepare the drag UI.
  • create few drag elements from php (static).
  • create a drop box “content_box_drop” , so that users can drop the dragged element into it for selection.
  • create a <p> tag so that we can append the drag element to it.  (you can use any!)
  • use a div to show the result , here “search_result”.

javascript to create a drag and drop function and store the result in MySQL

//initialize the drag and drop functions.
function drag() {

$("#content_box_drag p").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid"

    //add comma to previous last line & uncomment this if u want to remove the dropped item
    /*stop: function(){$(this).remove();}*/


$("#content_box_drop p").droppable({
    activeClass: "dropper_hover",
    hoverClass: "dropper_hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        var ele = ui.draggable.text();
            url: "store.php",
            type: "POST",
            data: {
                element: ele
            beforeSend: function () {
            success: function (data) {


Please note that the idea of this tutorial is to show you how to create things in a simple and understandable way. It does not focus on security and authenticity etc..

Check out the other cool code links 🙂

Hope it was helpful , as it was for me , Subscription and Comments are appreciated!!

Demo look::

jQuery php mysql – drag and drop demo
Code Snippets

Join Discussion

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

All code will be displayed literally.


  • Thanks would be great if you can post it 🙂
    I did try applying an image but it did seem to work properly.
    Just stopped everything working !

  • Yes, if an object is dragged out of draggable area , it would be removed from the draggable div. you need can fix that with some tweeks.Also, post it as a comment to help others.
    backround image can be called for .dropper css.

  • Thanks
    That sort of works. Only issue is as soon as you move anything from the left it is is removed from the list.

    That means I could drag a few pixels and it would go from the left. Ideally I'd want this to only delete from the left if I drop it on the right !

    Any way to add an image to the background of the right div ?

  • Replace the first draggable function with this, that should do

    $( "#content_box_drag p" ).draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    stop: function(){$(this).remove();}


  • Thanks for this script 🙂
    Is it possible to amend it so when you drag items from the left to the right, they are deleted from the left list ??

    Thanks 🙂

  • Hola que tal, soy Fernando Flores Alvarado

    No se si tu estés de acuerdo pero estoy seguro que tu diseño me seria de utilidad….. no me podrías mandar el código a mi correo….


    Te lo agradecería mucho….

    Sorry removed your comment by mistake. The codes are free to copy and use my friend. I do not keep any scripts, because i write them directly here. My only income is google adsense and rest is free!! 🙂

  • Thank you, am working to buy a domain and start my blog, where i can do exactly as suggested by u… tnx again, subscribe if helpful.

  • esta muy bien….. Estaría mejor con un enlace de descarga de archivos y la estructura de la base de datos….

    Link for Download