Drag and Drop div area with pure javascript – Step 3

August 18, 2010 | In: css, javascript, web development

My last two posts told to create javascript and html file. This post will tell you last step to drag and drop div are with pure javascript ( without jQuery ).
Add below css code to head tags in the index.html file:

<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		height:100%;
		width:100%;
		margin:10px;
		padding-left:0px;
	}
 
	form{
		display:inline;
	}
 
	.imageBox:hover{
	cursor:move;
	}
 
	.imageBox,.imageBoxHighlighted{
		width:130px;	/* Total width of each image box */
		height:160px;	/* Total height of each image box */
		float:left;
	}
	.imageBox_theImage{
		width:110px;	/* Width of image */
		height:125px;	/* Height of image */
 
		/*
		Don't change these values *
		*/
		background-position: center center;
		background-repeat: no-repeat;
		margin: 0 auto;
		margin-bottom:2px;
	}
 
	.imageBox .imageBox_theImage{
		border:1px solid #DDD;	/* Border color for not selected images */
		padding:2px;
	}
	.imageBoxHighlighted .imageBox_theImage{
		border:3px solid #316AC5;	/* Border color for selected image */
		padding:0px;
 
	}
	.imageBoxHighlighted span{	/* Title of selected image */
		background-color: #316AC5;
		color:#FFFFFF;
		padding:2px;
	}
 
	.imageBox_label{	/* Title of images - both selected and not selected */
		text-align:center;
		font-family: arial;
		font-size:11px;
		padding-top:2px;
		margin: 0 auto;
	}
 
	/*
	DIV that indicates where the dragged image will be placed
	*/
	#insertionMarker{
		height:150px;
		width:6px;
		position:absolute;
		display:none;
 
	}
 
	#insertionMarkerLine{
		width:6px;	/* No need to change this value */
		height:145px;	/* To adjust the height of the div that indicates where the dragged image will be dropped */
 
	}
 
	#insertionMarker img{
		float:left;
	}
 
	/*
	DIV that shows the image as you drag it
	*/
	#dragDropContent{
 
		opacity:0.4;	/* 40 % opacity */
		filter:alpha(opacity=40);	/* 40 % opacity */
 
		/*
		No need to change these three values
		*/
		position:absolute;
		z-index:10;
		display:none;
 
	}
	</style>

and create a folder with name images and put your images in this folder which included in the index.html file. and run index.html page in the browser. you will get your output…