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…