Using jQuery you can create simple Drag & Drop features easily and manage them well. jQuery UI provides with a vast suite of APIs that can create a UI with Drag Drop functionality.
Steps :-
1. Create a HTML file which includes css, jquery & javascript libraries .
2. Create Javascript file (makecodeeasy.js)
3. Create css file (makecodeeasy.css)
4. Demo
5. Try the code & Enjoy :)
jsfiddle link :- http://jsfiddle.net/zBhD7/
Steps :-
1. Create a HTML file which includes css, jquery & javascript libraries .
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Drag and drop</title>
<LINK REL=StyleSheet HREF="css/makecodeeasy.css" TYPE="text/css">
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div>
<fieldset id="shop" class="draggableContainer">
<legend>Draggable component</legend>
<img class="component" id="1" src="image/1.jpg">
<img class="component" id="2" src="image/2.jpg">
<img class="component" id="3" src="image/3.jpg">
<img class="component" id="4" src="image/4.jpg">
</fieldset>
</div>
<div>
<fieldset>
<legend>dropZone</legend>
<div class="dropZone" id="dropZone"></div>
</fieldset>
</div>
<script src="js/makecodeeasy.js"></script>
</body>
</html>
2. Create Javascript file (makecodeeasy.js)
var dropArea = document.querySelector('#dropZone');
var conponents = document.querySelectorAll('.component');
for ( var i = 0; i < conponents.length; i++) {
conponents[i].setAttribute('draggable', 'true');
conponents[i].addEventListener('dragstart', function(evnt) {
evnt.dataTransfer.effectAllowed = 'copy';
evnt.dataTransfer.setData('text', this.id);
return false;
}, false);
}
dropArea.addEventListener('dragover', function(evnt) {
if (evnt.preventDefault)
evnt.preventDefault();
evnt.dataTransfer.dropEffect = 'copy';
return false;
}, false);
dropArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation)
evnt.stopPropagation();
var id = evnt.dataTransfer.getData('text');
var theitem = document.getElementById(id);
if (theitem == null) {
evnt.preventDefault();
return;
}
var y = document.createElement('img');
y.src = theitem.src;
dropArea.appendChild(y);
evnt.preventDefault(); // for Firefox
return false;
}, false);
3. Create css file (makecodeeasy.css)
body {
padding: 40px;
}
.draggableContainer {
border-radius: 6px;
}
.component {
border: 3px solid white;
}
.component:hover {
border: 3px solid red;
cursor: move;
}
#dropArea {
position: relative;
height: 200px;
width: 100%;
float: left;
border: 1px dotted #999;
}
.dropZone {
width:100%;
height:100px
}
4. Demo
jsfiddle link :- http://jsfiddle.net/zBhD7/
