Drag and Drop div area with pure javascript – Step 1

Today I have to work on drag and drop functionality and I found that on mostly sites it provides using Jquery but I have to develop with pure javascript. so I found best code for it. and this was the solution :
First create a file draganddrop.js and put below code in this file:

var operaBrowser = false;
if(navigator.userAgent.indexOf('Opera')>=0)operaBrowser=1;
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;


function cancelEvent()
{
	return false;
}
var activeImage = false;
var readyToMove = false;
var moveTimer = -1;
var dragDropDiv;
var insertionMarker;

var offsetX_marker = -3;	// offset X - element that indicates destinaton of drop
var offsetY_marker = 0;	// offset Y - element that indicates destinaton of drop

var firefoxOffsetX_marker = -3;
var firefoxOffsetY_marker = -2;

if(navigatorVersion<6 && MSIE){	/* IE 5.5 fix */
	offsetX_marker-=23;
	offsetY_marker-=10;		
}

var destinationObject = false;

var divXPositions = new Array();
var divYPositions = new Array();
var divWidth = new Array();
var divHeight = new Array();
	
var tmpLeft = 0;
var tmpTop = 0;

var eventDiff_x = 0;
var eventDiff_y = 0;
	
function getTopPos(inputObj)
{		
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
	if(inputObj.tagName!='HTML'){
		returnValue += (inputObj.offsetTop - inputObj.scrollTop);
		if(document.all)returnValue+=inputObj.clientTop;
	}
  } 
  return returnValue;
}
function getLeftPos(inputObj)
{	  
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null){
	if(inputObj.tagName!='HTML'){
		returnValue += inputObj.offsetLeft;
		if(document.all)returnValue+=inputObj.clientLeft;
	}
  }
  return returnValue;
}
	
function selectImage(e)
{	
	if(document.all && !operaBrowser)e = event;
	var obj = this.parentNode;
	if(activeImage)activeImage.className='imageBox';
	obj.className = 'imageBoxHighlighted';
	activeImage = obj;
	readyToMove = true;
	moveTimer=0;
	
	tmpLeft = e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
	tmpTop = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop);
	
	startMoveTimer();	
	
	
	return false;	
}

function startMoveTimer(){
	if(moveTimer>=0 && moveTimer<10){
		moveTimer++;
		setTimeout('startMoveTimer()',15);
	}
	if(moveTimer==10){
		getDivCoordinates();
		var subElements = dragDropDiv.getElementsByTagName('DIV');
		if(subElements.length>0){
			dragDropDiv.removeChild(subElements[0]);
		}
	
		dragDropDiv.style.display='block';
		var newDiv = activeImage.cloneNode(true);
		newDiv.className='imageBox';	
		newDiv.id='';
		dragDropDiv.appendChild(newDiv);	
		
		dragDropDiv.style.top = tmpTop + 'px';
		dragDropDiv.style.left = tmpLeft + 'px';
						
	}
	return false;
}

function dragDropEnd(ev)
{
	readyToMove = false;
	moveTimer = -1;

	dragDropDiv.style.display='none';
	insertionMarker.style.display='none';
	
	if(destinationObject && destinationObject!=activeImage){
		var parentObj = destinationObject.parentNode;
		parentObj.insertBefore(activeImage,destinationObject);
		activeImage.className='imageBox';
		activeImage = false;
		destinationObject=false;
		getDivCoordinates();
		saveImageOrder();
	}
	return false;
}

function dragDropMove(e)
{
	if(moveTimer==-1)return;
	if(document.all && !operaBrowser)e = event;
	var leftPos = e.clientX + document.documentElement.scrollLeft - eventDiff_x;
	var topPos = e.clientY + document.documentElement.scrollTop - eventDiff_y;
	dragDropDiv.style.top = topPos + 'px';
	dragDropDiv.style.left = leftPos + 'px';
	
	leftPos = leftPos + eventDiff_x;
	topPos = topPos + eventDiff_y;
	
	if(e.button!=1 && document.all &&  !operaBrowser)dragDropEnd(e);
	var elementFound = false;
	for(var prop in divXPositions){
		if(divXPositions[prop]/1 < leftPos/1 && (divXPositions[prop]/1 + divWidth[prop]*0.7)>leftPos/1 && divYPositions[prop]/1topPos/1){
			
			if(document.all ){
				offsetX = offsetX_marker;
				offsetY = offsetY_marker;
			}else{
				offsetX = firefoxOffsetX_marker;
				offsetY = firefoxOffsetY_marker;
			}
			insertionMarker.style.top = divYPositions[prop] + offsetY + 'px';
			insertionMarker.style.left = divXPositions[prop] + offsetX + 'px';
			insertionMarker.style.display='block';	
			destinationObject = document.getElementById(prop);
			elementFound = true;	
			break;	
		}				
	}
	
	
	if(!elementFound){
		insertionMarker.style.display='none';
		destinationObject = false;
	}
	
	return false;
	
}



function getDivCoordinates()
{
	var divs = document.getElementsByTagName('DIV');
	for(var no=0;no0){
					orderString = orderString + ',';
					}
				orderString = orderString + objects[no].id;
				}
			}			
		}
	
	document.getElementById('debug').value = orderString;
	
}

function initGallery()
{
	var divs = document.getElementsByTagName('div');
	for(var no=0;no
Go to Step - 2

  Tweet This Post