About Me

My photo

one who looks outside, dreams
one who looks inside, awakens!!

Get FREE updates!! subscribe!!

Delivered by FeedBurner

Like it? Follow up!! :)

Oct 12, 2013

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

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

Hello their !

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{ padding:5px;
 border:#00FFFF solid 1px;
 font-family:Verdana, Arial, Helvetica, sans-serif;

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

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

.dragelement{ padding:5px; margin:3px; width:270px;
border:#99FF66 solid 1px;

.dropper{ width:270px;


.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

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 function and produce the result

//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},


Now create a page store.php and write the following to store the value

$con = mysql_connect("localhost","asc","abc123");
if (!$con)
  die('Could not connect: ' . mysql_error());
 mysql_select_db( 'shop' ); 

$element = $_POST['element'];

$query = mysql_query("insert into cart values ('',$element)");
echo "$element is added";

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