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

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 we start , I would recommend you to learn this basic Drag & drop tutorial

Basic CSS to style our drag and drop UI

.content_box { 
  padding:5px; 
  width:300px; 
  float:left;
  height:250px; 
  border:#00FFFF solid 1px; 
  font-family:Verdana, Arial, Helvetica, sans-serif;
  margin:10px;
  overflow:auto;
  color:#999999;
  font-size:14px;
}

.content_holder_box{ width:300px;
  float:right;
  height: 250px;
  border:#0099FF solid 1px;
  padding:10px;
  margin:10px;
  color:#999999;
  font-size:14px;
}

.content_holder_box:hover{ 
  border:#0099FF solid 1px; 
}

.dragelement{ 
  padding:5px; 
  margin:3px; 
  width:270px; 
  border:#99FF66 solid 1px;
  background-color:#E2FFC6;
  cursor:move;
  color:#000;
  font-size:13px;
}

.dropper{ width:270px;
  height:125px;
  margin:10px; 
}

.dropper_hover{ 
  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
<?php
for($i=0; $i<5;$i++)
{
    echo "<p class='dragelement' id='dragelement_$i'>Ferrari_$i</p>";
}
?>
</div>
<div class="content_holder_box" id="content_box_drop">Drop here
<p class="dropper"></p>
</div>
<div style="clear:both;"></div>
<br/><br/>
<div id="search_result"></div>

Let’s understand the attributes and HTML structure above

  • 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”.

jquery 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();
        $.ajax({
            url: "store.php",
            type: "POST",
            data: {
                element: ele
            },
            beforeSend: function () {
                $('#search_result').html("<center><br/><h4>Loading.....</h4></center>");
            },
            success: function (data) {
                $("#search_result").html(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!!

Hit Like if this article was useful to you!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a Reply

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