Drag and Drop- Drag HTML Codes and Execute by Dropping

Written by @m_k_amin 20 May 2013

HTML5 allows you to drag HTML codes and execute them when its dropped. This is a nice feature and may be used in the sites which providing some designing features and lets its users to use HTML codes. However, this example shows the power and flexibility of HTML5 in its Drag and Drop feature and you may get many ideas from it! Drag the written codes in the left and drop them on the specified box.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->

<head>
<script>
function saveobj(ev){
var code=document.getElementById(ev.target.id).innerHTML
code= code.replace(/&lt;/g,"<")
code= code.replace(/&gt;/g,">")
ev.dataTransfer.setData("text/html",code);
}
function allowdrag(ev){
ev.preventDefault()
}
function addobj(ev){
var code=ev.dataTransfer.getData("text/html")
ev.target.innerHTML=ev.target.innerHTML +"<br>"+ code;
}
</script>
</head>
<table style="width: 400px">
	<tr>
		<td style="width: 200px">
		
			<div style="border: thick solid maroon; width: 180px; height: 20px; text-align: center; color: #1F23CA; font-size: 10pt;"
			ID="txt1" draggable="true" ondragstart="saveobj(event)"
			>&lt;i&gt;Italic Text&lt;/i&gt;</div>

		</td>
		<td rowspan="3" style="text-align: right">
		
			<div style="border: 1px solid navy; height: 130px; padding: 1px 4px; width: 169px; text-align: center; "
			ondragover="allowdrag(event)" ondrop="addobj(event)"
			>Drop Here</div>

		</td>
	</tr>
	<tr>
		<td style="width: 200px">
			
			<div style="border: thick solid maroon; width: 180px; height: 40px; text-align: center; color: #1F23CA; font-size: 10pt;"
			ID="txt2" draggable="true" ondragstart="saveobj(event)"
			>&lt;input name=&quot;Button1&quot; type=&quot;button&quot; value=&quot;button&quot;&gt;</div>

		</td>
	</tr>
	<tr>
		<td style="width: 200px">
			
			<div style="border: thick solid maroon; width: 180px; height: 40px; text-align: center; color: #1F23CA; font-size: 10pt;"
			ID="txt3" draggable="true" ondragstart="saveobj(event)"
			>&lt;span style=&quot;background-color: #FAFAA1&quot;&gt;Highlighted&lt;/span&gt;</div>
			
		</td>
	</tr>
</table>

<div style="text-align: center"><br><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300