Create HTML Element by just Dragging Element Name

hello guys,

today i visited Wufoo website, actually this website provides facility to create online forms, it’s very good website.

but i found one drawback there that we can’t download that form.

there i seen drag and drop textbox , radio button n all html elements , we just need to drag and drop on the form area. so no need to remember element’s syntax.

so i just thought let’s write such type of code which gives you facility to just drag element-name and drop it on form area , so that element will generate on form.

code here!

first create one database and store the element syntax inside on table.

for ex:
table name -> widget

<input type=”text” />

so this is our widget table.

oky now create index.php file for bellow code

<!doctype html>
<html lang="en">
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
#draggable { width: 50px; height: 50px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
var res;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable(
drop: function( event, ui ) {
var url = "widget.php";
type: "post",
url: url,
success: function(response)
document.getElementById('result').innerHTML = response;
<div id="draggable">
<div id="droppable">
<p id = "result">Drop here</p>

so here, inside droppable event i used $.ajax() for sending request to widget.php file, widget.php file fetch the data from our widget table (using select query) and i just add response to result div. so there , textbox will generate and appear.!

so simple…



$qry = "select *from widget";
$res = mysql_query($qry);
$data = mysql_fetch_row($res);
echo $data[0];


(Note: this code will work only if internet connection is available because online jquery files are included)

okY donE!!

aaahh… Beauty of JquerY!

Njoy D codE!!

hope you Like it!


2 thoughts on “Create HTML Element by just Dragging Element Name

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s