Drag and Drop Sample Javascript code
Just copy and paste the below HTML - JS code and save it as an HTML file. Run the html file to check the execution of the script.
///////////// COPY THE CODE FROM HERE/////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.dropContainer1 {
position:absolute;
width:180px;
height:500px;
top:20px;
left:200px;
background-color:#D8F2F3;
}
.dropContainer2 {
position:absolute;
width:180px;
height:500px;
top:20px;
left:500px;
background-color:#D8F2F3;
}
.dragContainer {
z-index:1;
margin:5px;
}
.dragTitle {
background-color: #EC966A;
width:155px;
}
.dragBody {
background-color: #62C1EB;
width:155px;
}
</style>
<script type="text/javascript">
var dropableArray = new Array('dropable1','dropable2');
var dropables = {};
var clicked = false;
var x;
var y;
var element = false;
var elementToMove = false;
var parentOfMove = false;
var elementToDrop = false;
var dropEnabled = false;
var leftPosition;
var dropLimitY;
var dropCurrentY;
var dropLimitFirstY;
var dropCurrentFirstY;
var dropElementNum;
var totalDropElementNum;
var dragLimitY;
var dragCurrentY;
var dragLimitFirstY;
var dragCurrentFirstY;
var dragElementNum;
var totalDragElementNum;
var sortDragablesInDrop;
var sortDragablesInMove;
var dragabalesInDropY;
var dragabalesInMoveY;
function getDropables(){
for(i=0;i<dropableArray.length;i++){
var dropable_x = document.getElementById(dropableArray[i]).offsetLeft;
var dropable_x1 = parseInt(dropable_x)+parseInt(document.getElementById(dropableArray[i]).offsetWidth);
var dropable_y = document.getElementById(dropableArray[i]).offsetTop;
var dropable_y1 = parseInt(dropable_y)+parseInt(document.getElementById(dropableArray[i]).offsetHeight);
dropables[dropableArray[i]] = dropable_x+','+dropable_x1+','+dropable_y+','+dropable_y1;
}
}
function clickForDrag(event, title,divelement) {
clicked = true;
element = document.getElementById('dragspan');
element.innerHTML = title;
elementToMove = document.getElementById(divelement);
parentOfMove = elementToMove.parentNode;
}
function moveElement(event) {
if(element){
element.style.display='';
element.style.cursor = 'move';
if(clicked == true) {
if(event.pageX || event.pageY){
x = event.pageX;
y = event.pageY;
}
else if(event.clientX || event.clientY){
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
elementX = parseInt(x) - 50;
element.style.top = y +'px';
element.style.left = elementX +'px';
resetDropables();
setDropable();
}
}
}
function resetDropables(){
dropEnabled = false;
for(i=0;i<dropableArray.length;i++){
document.getElementById(dropableArray[i]).style.backgroundColor = '#D8F2F3';
}
}
function setDropable(){
for(i=0;i<dropableArray.length;i++){
dropablePosition = dropables[dropableArray[i]].split(',');
if(x >= dropablePosition[0] && x <= dropablePosition[1] && y >= dropablePosition[2] && y <= dropablePosition[3]){
document.getElementById(dropableArray[i]).style.backgroundColor = '#B8D4D5';
elementToDrop = document.getElementById(dropableArray[i]);
dropEnabled = true;
}
}
}
function dropElement(event){
clicked = false;
if(element){
element.style.display='none';
element = false;
var targetElement = (window.event) ? event.srcElement : event.target;
var reltg = (event.relatedTarget) ? event.relatedTarget : event.toElement;
if(dropEnabled){
elementToDrop.appendChild(elementToMove);
elementToMove.style.position='fixed';
elementToMove.style.top = y +'px';
leftPosition = parseInt(elementToDrop.offsetLeft);
elementToMove.style.left = leftPosition +'px';
elementToDrop.style.backgroundColor = '#D8F2F3';
setTimeout(function(){setPosition()},'500');
}
}
}
function getDragables(thisElement){
var allChilds = thisElement.childNodes;
dragables = new Array();
for(i=0;i < allChilds.length;i++){
if(allChilds[i].className=='dragContainer'){
dragables.push(document.getElementById(allChilds[i].id));
}
}
return dragables;
}
function sortDragables(thisElements){
var thisElementsY = new Array();
for(i=0;i<thisElements.length;i++){
thisElementsY.push(thisElements[i].offsetTop);
}
thisElementsY.sort(function(a,b){return a - b}) ;
var sortElements = new Array();
for(i=0;i<thisElementsY.length;i++){
for(j=0;j<thisElements.length;j++){
if(thisElements[j].offsetTop == thisElementsY[i]){
sortElements.push(thisElements[j]);
break;
}
}
}
return sortElements;
}
function setFinalPositionInDrop(){
if(dropCurrentFirstY>dropLimitFirstY){
if(dropCurrentY<=dropLimitY){
if(dropElementNum < totalDropElementNum){
++dropElementNum;
if(sortDragablesInDrop[dropElementNum]){
dropCurrentFirstY = dropCurrentY = sortDragablesInDrop[dropElementNum].offsetTop;
dropLimitFirstY = dropLimitY = dragabalesInDropY[dropElementNum];
setFinalPositionInDrop();
}else{
return;
}
}
}
}else if(dropCurrentFirstY<dropLimitFirstY){
if(dropCurrentY>=dropLimitY){
if(dropElementNum < totalDropElementNum){
++dropElementNum;
if(sortDragablesInDrop[dropElementNum]){
dropCurrentFirstY = dropCurrentY = sortDragablesInDrop[dropElementNum].offsetTop;
dropLimitFirstY = dropLimitY = dragabalesInDropY[dropElementNum];
setFinalPositionInDrop();
}else{
return;
}
}
}
}
if(dropElementNum == totalDropElementNum){
return;
}
if(dropCurrentFirstY>dropLimitFirstY){
dropCurrentY--;
}else if(dropCurrentFirstY<dropLimitFirstY){
dropCurrentY++;
}
sortDragablesInDrop[dropElementNum].style.top = dropCurrentY + 'px';
t=setTimeout("setFinalPositionInDrop();",10);
}
function setFinalPositionInDrag(){
if(dragCurrentFirstY>dragLimitFirstY){
if(dragCurrentY<=dragLimitY){
if(dragElementNum < totalDragElementNum){
++dragElementNum;
if(sortDragablesInMove[dragElementNum]){
dragCurrentFirstY = dragCurrentY = sortDragablesInMove[dragElementNum].offsetTop;
dragLimitFirstY = dragLimitY = dragabalesInMoveY[dragElementNum];
setFinalPositionInDrag();
}else{
return;
}
}
}
}else if(dragCurrentFirstY<dragLimitFirstY){
if(dragCurrentY>=dragLimitY){
if(dragElementNum < totalDragElementNum){
++dragElementNum;
if(sortDragablesInMove[dragElementNum]){
dragCurrentFirstY = dragCurrentY = sortDragablesInMove[dragElementNum].offsetTop;
dragLimitFirstY = dragLimitY = dragabalesInMoveY[dragElementNum];
setFinalPositionInDrag();
}else{
return;
}
}
}
}
if(dragElementNum == totalDragElementNum){
return;
}
if(dragCurrentY>dragLimitY){
dragCurrentY--;
}else if(dragCurrentY<dragLimitY){
dragCurrentY++;
}
if(sortDragablesInMove[dragElementNum]){
sortDragablesInMove[dragElementNum].style.top = dragCurrentY + 'px';
t=setTimeout("setFinalPositionInDrag();",10);
}
}
function setPosition(){
var dragablesInDrop = getDragables(elementToDrop);
for(i=0;i<dragablesInDrop.length;i++){
var dragable_x = parseInt(dragablesInDrop[i].offsetLeft);
var dragable_x1 = parseInt(dragable_x)+parseInt(dragablesInDrop[i].offsetWidth);
var dragable_y = parseInt(dragablesInDrop[i].offsetTop);
var dragable_y1 = parseInt(dragable_y)+parseInt(dragablesInDrop[i].offsetHeight);
if(x >= dragable_x && x <= dragable_x1 && y >= dragable_y && y <= dragable_y1){
var adjustY = parseInt(dragablesInDrop[i].offsetTop)+20;
dragablesInDrop[i].style.top = adjustY +'px';
break;
}
}
sortDragablesInDrop = sortDragables(dragablesInDrop);
var previousHeight = '';
var previousTop = '';
var setTop;
dragabalesInDropY = new Array();
for(i=0;i<sortDragablesInDrop.length;i++){
if(!previousTop){
setTop = elementToDrop.offsetTop;
}else{
setTop = parseInt(previousTop) + parseInt(previousHeight) + 5;
}
dragabalesInDropY.push(setTop);
previousTop = setTop;
previousHeight = sortDragablesInDrop[i].offsetHeight;
}
if(sortDragablesInDrop.length){
dropLimitFirstY = dropLimitY = dragabalesInDropY[0];
dropCurrentFirstY = dropCurrentY = sortDragablesInDrop[0].offsetTop;
dropElementNum = 0;
totalDropElementNum = dragabalesInDropY.length;
setFinalPositionInDrop();
}
if(elementToDrop.id != parentOfMove.id){
var dragablesInMove = getDragables(parentOfMove);
sortDragablesInMove = sortDragables(dragablesInMove);
var previousHeight = '';
var previousTop = '';
var setTop;
dragabalesInMoveY = new Array();
for(i=0;i<sortDragablesInMove.length;i++){
if(!previousTop){
setTop = parentOfMove.offsetTop;
}else{
setTop = parseInt(previousTop) + parseInt(previousHeight) + 5;
}
dragabalesInMoveY.push(setTop);
previousTop = setTop;
previousHeight = sortDragablesInMove[i].offsetHeight;
}
if(sortDragablesInMove.length){
dragLimitFirstY = dragLimitY = dragabalesInMoveY[0];
dragCurrentFirstY = dragCurrentY = sortDragablesInMove[0].offsetTop;
dragElementNum = 0;
totalDragElementNum = dragabalesInMoveY.length;
setFinalPositionInDrag();
}
}
elementToMove = false;
elementToDrop = false;
}
function disableSelection(){
// Internet Explorer:
if (document.all)
document.onselectstart =
function () { return false; };
// Netscape 4:
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown =
function (evt) { return false; };
}
// Netscape 6:
document.onmousedown = function () { return false; };
}
</script>
</head>
<body id="body" onMouseMove="moveElement(event);" onmouseUp="dropElement(event)" onload="getDropables();disableSelection()">
<div id='dropable1' class="dropContainer1">
<div id='dragable1' class='dragContainer' style="position:fixed;top:20px;left:200px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title1', 'dragable1')" onMouseOver="this.style.cursor='move';">Drag Title1</div>
<div id="content" class='dragBody'>First div for dragging</div>
</div>
<div id='dragable2' class='dragContainer' style="position:fixed;top:80px;left:200px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title2', 'dragable2')" onMouseOver="this.style.cursor='move';">Drag Title2</div>
<div id="content" class='dragBody'>Second div for dragging</div>
</div>
</div>
<div id='dropable2' class="dropContainer2">
<div id='dragable3' class='dragContainer' style="position:fixed;top:20px;left:500px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title3', 'dragable3')" onMouseOver="this.style.cursor='move';">Drag Title3</div>
<div id="content" class='dragBody'>Third div for dragging</div>
</div>
<div id='dragable4' class='dragContainer' style="position:fixed;top:80px;left:500px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title4', 'dragable4')" onMouseOver="this.style.cursor='move';">Drag Title4</div>
<div id="content" class='dragBody'>Fourth div for dragging</div>
</div>
</div>
<span id="dragspan" style="background-color:#DAC645;position:absolute;display:none;width:150px;z-index:2"></span>
</body>
</html>
///////////// COPY THE CODE TILL HERE/////////////////
Just copy and paste the below HTML - JS code and save it as an HTML file. Run the html file to check the execution of the script.
///////////// COPY THE CODE FROM HERE/////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.dropContainer1 {
position:absolute;
width:180px;
height:500px;
top:20px;
left:200px;
background-color:#D8F2F3;
}
.dropContainer2 {
position:absolute;
width:180px;
height:500px;
top:20px;
left:500px;
background-color:#D8F2F3;
}
.dragContainer {
z-index:1;
margin:5px;
}
.dragTitle {
background-color: #EC966A;
width:155px;
}
.dragBody {
background-color: #62C1EB;
width:155px;
}
</style>
<script type="text/javascript">
var dropableArray = new Array('dropable1','dropable2');
var dropables = {};
var clicked = false;
var x;
var y;
var element = false;
var elementToMove = false;
var parentOfMove = false;
var elementToDrop = false;
var dropEnabled = false;
var leftPosition;
var dropLimitY;
var dropCurrentY;
var dropLimitFirstY;
var dropCurrentFirstY;
var dropElementNum;
var totalDropElementNum;
var dragLimitY;
var dragCurrentY;
var dragLimitFirstY;
var dragCurrentFirstY;
var dragElementNum;
var totalDragElementNum;
var sortDragablesInDrop;
var sortDragablesInMove;
var dragabalesInDropY;
var dragabalesInMoveY;
function getDropables(){
for(i=0;i<dropableArray.length;i++){
var dropable_x = document.getElementById(dropableArray[i]).offsetLeft;
var dropable_x1 = parseInt(dropable_x)+parseInt(document.getElementById(dropableArray[i]).offsetWidth);
var dropable_y = document.getElementById(dropableArray[i]).offsetTop;
var dropable_y1 = parseInt(dropable_y)+parseInt(document.getElementById(dropableArray[i]).offsetHeight);
dropables[dropableArray[i]] = dropable_x+','+dropable_x1+','+dropable_y+','+dropable_y1;
}
}
function clickForDrag(event, title,divelement) {
clicked = true;
element = document.getElementById('dragspan');
element.innerHTML = title;
elementToMove = document.getElementById(divelement);
parentOfMove = elementToMove.parentNode;
}
function moveElement(event) {
if(element){
element.style.display='';
element.style.cursor = 'move';
if(clicked == true) {
if(event.pageX || event.pageY){
x = event.pageX;
y = event.pageY;
}
else if(event.clientX || event.clientY){
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
elementX = parseInt(x) - 50;
element.style.top = y +'px';
element.style.left = elementX +'px';
resetDropables();
setDropable();
}
}
}
function resetDropables(){
dropEnabled = false;
for(i=0;i<dropableArray.length;i++){
document.getElementById(dropableArray[i]).style.backgroundColor = '#D8F2F3';
}
}
function setDropable(){
for(i=0;i<dropableArray.length;i++){
dropablePosition = dropables[dropableArray[i]].split(',');
if(x >= dropablePosition[0] && x <= dropablePosition[1] && y >= dropablePosition[2] && y <= dropablePosition[3]){
document.getElementById(dropableArray[i]).style.backgroundColor = '#B8D4D5';
elementToDrop = document.getElementById(dropableArray[i]);
dropEnabled = true;
}
}
}
function dropElement(event){
clicked = false;
if(element){
element.style.display='none';
element = false;
var targetElement = (window.event) ? event.srcElement : event.target;
var reltg = (event.relatedTarget) ? event.relatedTarget : event.toElement;
if(dropEnabled){
elementToDrop.appendChild(elementToMove);
elementToMove.style.position='fixed';
elementToMove.style.top = y +'px';
leftPosition = parseInt(elementToDrop.offsetLeft);
elementToMove.style.left = leftPosition +'px';
elementToDrop.style.backgroundColor = '#D8F2F3';
setTimeout(function(){setPosition()},'500');
}
}
}
function getDragables(thisElement){
var allChilds = thisElement.childNodes;
dragables = new Array();
for(i=0;i < allChilds.length;i++){
if(allChilds[i].className=='dragContainer'){
dragables.push(document.getElementById(allChilds[i].id));
}
}
return dragables;
}
function sortDragables(thisElements){
var thisElementsY = new Array();
for(i=0;i<thisElements.length;i++){
thisElementsY.push(thisElements[i].offsetTop);
}
thisElementsY.sort(function(a,b){return a - b}) ;
var sortElements = new Array();
for(i=0;i<thisElementsY.length;i++){
for(j=0;j<thisElements.length;j++){
if(thisElements[j].offsetTop == thisElementsY[i]){
sortElements.push(thisElements[j]);
break;
}
}
}
return sortElements;
}
function setFinalPositionInDrop(){
if(dropCurrentFirstY>dropLimitFirstY){
if(dropCurrentY<=dropLimitY){
if(dropElementNum < totalDropElementNum){
++dropElementNum;
if(sortDragablesInDrop[dropElementNum]){
dropCurrentFirstY = dropCurrentY = sortDragablesInDrop[dropElementNum].offsetTop;
dropLimitFirstY = dropLimitY = dragabalesInDropY[dropElementNum];
setFinalPositionInDrop();
}else{
return;
}
}
}
}else if(dropCurrentFirstY<dropLimitFirstY){
if(dropCurrentY>=dropLimitY){
if(dropElementNum < totalDropElementNum){
++dropElementNum;
if(sortDragablesInDrop[dropElementNum]){
dropCurrentFirstY = dropCurrentY = sortDragablesInDrop[dropElementNum].offsetTop;
dropLimitFirstY = dropLimitY = dragabalesInDropY[dropElementNum];
setFinalPositionInDrop();
}else{
return;
}
}
}
}
if(dropElementNum == totalDropElementNum){
return;
}
if(dropCurrentFirstY>dropLimitFirstY){
dropCurrentY--;
}else if(dropCurrentFirstY<dropLimitFirstY){
dropCurrentY++;
}
sortDragablesInDrop[dropElementNum].style.top = dropCurrentY + 'px';
t=setTimeout("setFinalPositionInDrop();",10);
}
function setFinalPositionInDrag(){
if(dragCurrentFirstY>dragLimitFirstY){
if(dragCurrentY<=dragLimitY){
if(dragElementNum < totalDragElementNum){
++dragElementNum;
if(sortDragablesInMove[dragElementNum]){
dragCurrentFirstY = dragCurrentY = sortDragablesInMove[dragElementNum].offsetTop;
dragLimitFirstY = dragLimitY = dragabalesInMoveY[dragElementNum];
setFinalPositionInDrag();
}else{
return;
}
}
}
}else if(dragCurrentFirstY<dragLimitFirstY){
if(dragCurrentY>=dragLimitY){
if(dragElementNum < totalDragElementNum){
++dragElementNum;
if(sortDragablesInMove[dragElementNum]){
dragCurrentFirstY = dragCurrentY = sortDragablesInMove[dragElementNum].offsetTop;
dragLimitFirstY = dragLimitY = dragabalesInMoveY[dragElementNum];
setFinalPositionInDrag();
}else{
return;
}
}
}
}
if(dragElementNum == totalDragElementNum){
return;
}
if(dragCurrentY>dragLimitY){
dragCurrentY--;
}else if(dragCurrentY<dragLimitY){
dragCurrentY++;
}
if(sortDragablesInMove[dragElementNum]){
sortDragablesInMove[dragElementNum].style.top = dragCurrentY + 'px';
t=setTimeout("setFinalPositionInDrag();",10);
}
}
function setPosition(){
var dragablesInDrop = getDragables(elementToDrop);
for(i=0;i<dragablesInDrop.length;i++){
var dragable_x = parseInt(dragablesInDrop[i].offsetLeft);
var dragable_x1 = parseInt(dragable_x)+parseInt(dragablesInDrop[i].offsetWidth);
var dragable_y = parseInt(dragablesInDrop[i].offsetTop);
var dragable_y1 = parseInt(dragable_y)+parseInt(dragablesInDrop[i].offsetHeight);
if(x >= dragable_x && x <= dragable_x1 && y >= dragable_y && y <= dragable_y1){
var adjustY = parseInt(dragablesInDrop[i].offsetTop)+20;
dragablesInDrop[i].style.top = adjustY +'px';
break;
}
}
sortDragablesInDrop = sortDragables(dragablesInDrop);
var previousHeight = '';
var previousTop = '';
var setTop;
dragabalesInDropY = new Array();
for(i=0;i<sortDragablesInDrop.length;i++){
if(!previousTop){
setTop = elementToDrop.offsetTop;
}else{
setTop = parseInt(previousTop) + parseInt(previousHeight) + 5;
}
dragabalesInDropY.push(setTop);
previousTop = setTop;
previousHeight = sortDragablesInDrop[i].offsetHeight;
}
if(sortDragablesInDrop.length){
dropLimitFirstY = dropLimitY = dragabalesInDropY[0];
dropCurrentFirstY = dropCurrentY = sortDragablesInDrop[0].offsetTop;
dropElementNum = 0;
totalDropElementNum = dragabalesInDropY.length;
setFinalPositionInDrop();
}
if(elementToDrop.id != parentOfMove.id){
var dragablesInMove = getDragables(parentOfMove);
sortDragablesInMove = sortDragables(dragablesInMove);
var previousHeight = '';
var previousTop = '';
var setTop;
dragabalesInMoveY = new Array();
for(i=0;i<sortDragablesInMove.length;i++){
if(!previousTop){
setTop = parentOfMove.offsetTop;
}else{
setTop = parseInt(previousTop) + parseInt(previousHeight) + 5;
}
dragabalesInMoveY.push(setTop);
previousTop = setTop;
previousHeight = sortDragablesInMove[i].offsetHeight;
}
if(sortDragablesInMove.length){
dragLimitFirstY = dragLimitY = dragabalesInMoveY[0];
dragCurrentFirstY = dragCurrentY = sortDragablesInMove[0].offsetTop;
dragElementNum = 0;
totalDragElementNum = dragabalesInMoveY.length;
setFinalPositionInDrag();
}
}
elementToMove = false;
elementToDrop = false;
}
function disableSelection(){
// Internet Explorer:
if (document.all)
document.onselectstart =
function () { return false; };
// Netscape 4:
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown =
function (evt) { return false; };
}
// Netscape 6:
document.onmousedown = function () { return false; };
}
</script>
</head>
<body id="body" onMouseMove="moveElement(event);" onmouseUp="dropElement(event)" onload="getDropables();disableSelection()">
<div id='dropable1' class="dropContainer1">
<div id='dragable1' class='dragContainer' style="position:fixed;top:20px;left:200px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title1', 'dragable1')" onMouseOver="this.style.cursor='move';">Drag Title1</div>
<div id="content" class='dragBody'>First div for dragging</div>
</div>
<div id='dragable2' class='dragContainer' style="position:fixed;top:80px;left:200px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title2', 'dragable2')" onMouseOver="this.style.cursor='move';">Drag Title2</div>
<div id="content" class='dragBody'>Second div for dragging</div>
</div>
</div>
<div id='dropable2' class="dropContainer2">
<div id='dragable3' class='dragContainer' style="position:fixed;top:20px;left:500px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title3', 'dragable3')" onMouseOver="this.style.cursor='move';">Drag Title3</div>
<div id="content" class='dragBody'>Third div for dragging</div>
</div>
<div id='dragable4' class='dragContainer' style="position:fixed;top:80px;left:500px">
<div id="draggertitle" class='dragTitle' onmouseDown="clickForDrag(event,'Drag Title4', 'dragable4')" onMouseOver="this.style.cursor='move';">Drag Title4</div>
<div id="content" class='dragBody'>Fourth div for dragging</div>
</div>
</div>
<span id="dragspan" style="background-color:#DAC645;position:absolute;display:none;width:150px;z-index:2"></span>
</body>
</html>
///////////// COPY THE CODE TILL HERE/////////////////
Comments
Post a Comment