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

elementsyntax
<input type=”text” />

so this is our widget table.

oky now create index.php file for bellow code



<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style>
#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; }
</style>
<script>
var res;
$(function()
{
$( "#draggable" ).draggable();
$( "#droppable" ).droppable(
{
drop: function( event, ui ) {
var url = "widget.php";
$.ajax(
{
type: "post",
url: url,
success: function(response)
{
document.getElementById('result').innerHTML = response;
$('pre').hide();
}
});
}
});
});
</script>
</head>
<body>
<div id="draggable">
<pre>TextBox</pre>
</div>
<div id="droppable">
<p id = "result">Drop here</p>
</div>
</body>
</html>


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…


 

widget.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$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!

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s