HTML
<body>
<!--use
<div class="draggable" dropid="id of the dropzone element" ></div>
-->
<div class="draggable" dropid="dropzone1">I belong to dropzone1.</div>
<div class="draggable" dropid="dropzone2" style="position:absolute;left:270px;background-color: #f5b5b5;">I belong to dropzone2.</div>
<br/>
<br/>
<br/>
<div class="draggable" dropid="dropzone1">I also belong to dropzone1.</div>
<div class="draggable" dropid="dropzone2" style="position:absolute;left:270px;background-color: #f5b5b5;">I also belong to dropzone2.</div>
<div class="dropzone a" id="dropzone1" >Dropzone1</div>
<div class="dropzone b" id="dropzone2" >Dropzone2</div>
</body>
CSS
body{
background-color: rgba(0,95,266,0.2);
}
.draggable{
display: block;
cursor: move;
background-color: #82a1da;
padding: 5px;
box-sizing:border-box;
width: 250px;
height: 50px;
text-align: center;
color: #ebebeb;
border-radius: 4px;
box-shadow: 0px 0px 2px #82a1da;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2000;
}
.dropzone{
display: block;
margin:5px;
text-align: center;
padding: 20px;
width: 30%;
box-shadow: 0px 0px 2px #777;
height: 300px;
position: absolute;
top: 150px;
z-index: 1000;
}
.dropzone.a{
background-color: #b5daf5;
}
.dropzone.b{
background-color: #c2f5b5;
left: 35%;
}
JAVASCRIPT
(function(className){
var currentEl = { // this object will be updated everytime when the user clicks the draggable element
dropEl : "", // drop element
dropElx : 0, // drop element's x position or position of drop elements from left
dropEly : 0, // drop element's x position or position of drop elements from right
dropElheight : 0, // height of drop element
dropElwidth : 0 // width of drop element
},
draggables = document.getElementsByClassName(className),
xb=0,
yb=0;
function getXY(e){
e = e || window.event;
mx = e.clientX || e.pageX;
my = e.clientY || e.pageY;
return [mx,my];
}
function mUp(e){
var mXY = getXY(e),
mX = mXY[0],
mY = mXY[1];
if ( this.offsetLeft >= currentEl.dropElx && this.offsetTop >= currentEl.dropEly && ( this.offsetLeft + this.offsetWidth ) < ( parseInt(currentEl.dropElx) + parseInt(currentEl.dropElwidth)) && ( this.offsetTop + this.offsetHeight ) < ( parseInt(currentEl.dropEly) + parseInt(currentEl.dropElheight)) ) {
// this if statement states that element must be smaller than its drop element / dropzone else it wont fit
// in other words, the basket must not be smaller than the basket ball ;)
// codes to be executed when the element is dropped in its drop element / dropzone
//for default, if the element is dropped in its dropzone element then the element's postion will remain as it is
this.style.left = mX - ( mX - parseInt(this.offsetLeft) ) +"px" ;
this.style.top = mY - ( mY - parseInt(this.offsetTop) ) +"px" ;
}else{
// codes to be executed when the element is dropped outside from its drop element / dropzone
// codes in this else statement will also run if the element is bigger than its dropzone so make the dropzone bigger in size than the elements
//for default inx & iny attribute was set
//if the element is dropped out of drop element then it will be sent back to its first position using the inx & iny
var inx = parseInt(this.getAttribute("inx")),
iny = parseInt(this.getAttribute("iny"));
this.style.left = inx+"px";
this.style.top = iny+"px";
}
this.removeAttribute("dragActivity");
this.style.zIndex = "100000";
}
function mDown(e){
//updating the details of current element's drop element i.e updating the object currentEl
currentEl.dropEl = document.getElementById(this.getAttribute("dropid")),
currentEl.dropElheight = currentEl.dropEl.offsetHeight,
currentEl.dropElwidth = currentEl.dropEl.offsetWidth,
currentEl.dropElx = currentEl.dropEl.offsetLeft,
currentEl.dropEly = currentEl.dropEl.offsetTop;
this.style.zIndex = 100000 + 500;
var mXY = getXY(e);
xb = mXY[0] - parseInt(this.offsetLeft);
yb = mXY[1] - parseInt(this.offsetTop);
this.setAttribute("dragActivity","on");
}
function mMove(e){
var mXY = getXY(e);
if ( this.getAttribute("dragActivity") == "on" ) {
this.style.left = mXY[0] - xb +"px";
this.style.top = mXY[1] - yb +"px";
}
}
for(var i=0;i<draggables.length;i++){
var _t = draggables[i];
_t.style.position = "absolute";
_t.setAttribute("inx",_t.offsetLeft);
_t.setAttribute("iny",_t.offsetTop);
_t.onmousedown = mDown;
_t.onmousemove = mMove;
_t.onmouseup = mUp;
}
})("draggable"); //name of the class
