admin
Filed under - HTML5 & CSS3
3 Comments so far. Add yours now

Web Developer : Kushal Gandhi, August Infotech

Drag N Drop is one of the best feature of HTML 5.

Supported Browsers : Chrome, Opera, Firefox and Safari. [Higher Versions Only]

Drag N Drop – Demo

Download Source Code

[code]
<pre>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Drag And Drop - HTML5</title>
<style>
body {
margin: 0;
background-color: rgba(51,0,153,.2);
}
h1 {
text-align: center;
color: rgba(255,255,255,.7);
z-index: 3;
background-color: rgba(51,0,153,.3);
padding: 5px;
}
div#target1{
position:absolute;
height:400px;
width:400px;
background-color:rgba(255,255,255,.7);
margin-left:150px;
margin-top:50px;
}
div#target2{
position:absolute;
height:400px;
width:400px;
background-color:rgba(255,255,255,.7);
margin-left:750px;
margin-top:50px;
}
div#draggable1{
height:100px;
width:100px;
background-color:rgba(0,0,0,.1);
margin:10px;
padding:10px;
}
div#draggable2{
height:100px;
width:100px;
background-color:rgba(0,0,0,.5);
margin:10px 125px;
padding:10px;
}
div#draggable3{
height:100px;
width:100px;
background-color:rgba(0,0,0,1);
margin:10px 250px;
padding:10px;
color:#FFF;
}
</style>
<script type="text/javascript">
function start(e)
{
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Data", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target,0,0);
return true;
}

function enter(e)
{
return true;
}

function over(e)
{
var iddraggable = e.dataTransfer.getData("Data");
var id = e.target.getAttribute('id');
if(id =='target1' || id =='target2')
return false;
else
return true;
}

function drop(e)
{
var iddraggable = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(iddraggable));
e.stopPropagation();
return false;
}

function end(e)
{
e.dataTransfer.clearData("Data");
return true;
}

</script>
</head>

<body>
<h1>Drag And Drop</h1>
<div id="target1"
ondragenter = "return enter(event)"
ondragover = "return over(event)"
ondrop = "return drop(event)">

<div id="draggable1" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)"> 1
</div>

<div id="draggable2" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)"> 2
</div>

<div id="draggable3" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)"> 3
</div>

</div>
<div id="target2"
ondragenter = "return enter(event)"
ondragover = "return over(event)"
ondrop = "return drop(event)">
</div>

</body>
</html>
</pre>
[/code]

Web Developer : Kushal Gandhi, August Infotech

Uploaded Files:

drag-and-drop

3 Responses


  1. Binal on 13 Aug 2012

    Good Job Kushal!!!!

  2. iliyas on 14 Aug 2012

    Awesome work ..
    Keep them coming..

  3. Grady Gingrich on 14 Oct 2012

    I simply want to tell you that I’m new to blogging and site-building and actually liked this web site. Most likely I’m want to bookmark your website . You actually have remarkable well written articles. Thanks a bunch for sharing with us your web page.


Leave your comment

You must be logged in to post a comment.

Share IT © 2018. All rights reserved.