Drag and Drop div area with pure javascript – Step 2
August 18, 2010 | In: css, javascript, web development
After reading my previous post Drag and Drop div area with pure javascript – Step 1, you have created javascript file draganddrop.js.
Means you can add this javascript file to html page. so create a file index.html file and put below content in the head tag :
<script type="text/javascript" src="js/draganddrop.js" ></script> |
And put below code inside the body tag:
<form action="somePage.html" method="post"> <div style="clear:both;padding-bottom:10px"> <input type="button" style="width:100px" value="Save" onclick="saveImageOrder()"> </div> </form> <div id="GalleryContainer"> <div class="imageBox" id="imageBox0"> <div class="imageBox_theImage" style="background-image:url('images/image1.jpg')"></div> <div class="imageBox_label"><span>Image number 1</span></div> </div> <div class="imageBox" id="imageBox1"> <div class="imageBox_theImage" style="background-image:url('images/image2.jpg')"></div> <div class="imageBox_label"><span>Image number 2</span></div> </div> <div class="imageBox" id="imageBox2"> <div class="imageBox_theImage" style="background-image:url('images/image3.jpg')"></div> <div class="imageBox_label"><span>Image number 3</span></div> </div> <div class="imageBox" id="imageBox3"> <div class="imageBox_theImage" style="background-image:url('images/image4.jpg')"></div> <div class="imageBox_label"><span>Image number 4</span></div> </div> <div class="imageBox" id="imageBox4"> <div class="imageBox_theImage" style="background-image:url('images/image5.jpg')"></div> <div class="imageBox_label"><span>Image number 5</span></div> </div> <div class="imageBox" id="imageBox5"> <div class="imageBox_theImage" style="background-image:url('images/image6.jpg')"></div> <div class="imageBox_label"><span>Image number 6</span></div> </div> <div class="imageBox" id="imageBox6"> <div class="imageBox_theImage" style="background-image:url('images/image7.jpg')"></div> <div class="imageBox_label"><span>Image number 7</span></div> </div> <div class="imageBox" id="imageBox7"> <div class="imageBox_theImage" style="background-image:url('images/image8.jpg')"></div> <div class="imageBox_label"><span>Image number 8</span></div> </div> <div class="imageBox" id="imageBox8"> <div class="imageBox_theImage" style="background-image:url('images/image9.jpg')"></div> <div class="imageBox_label"><span>Image number 9</span></div> </div> <div class="imageBox" id="imageBox9"> <div class="imageBox_theImage" style="background-image:url('images/image10.jpg')"></div> <div class="imageBox_label"><span>Image number 10</span></div> </div> <div class="imageBox" id="imageBox10"> <div class="imageBox_theImage" style="background-image:url('images/image11.jpg')"></div> <div class="imageBox_label"><span>Image number 11</span></div> </div> <div class="imageBox" id="imageBox11"> <div class="imageBox_theImage" style="background-image:url('images/image12.jpg')"></div> <div class="imageBox_label"><span>Image number 12</span></div> </div> <div class="imageBox" id="imageBox12"> <div class="imageBox_theImage" style="background-image:url('images/image13.jpg')"></div> <div class="imageBox_label"><span>Image number 13</span></div> </div> <div class="imageBox" id="imageBox13"> <div class="imageBox_theImage" style="background-image:url('images/image14.jpg')"></div> <div class="imageBox_label"><span>Image number 14</span></div> </div> <div class="imageBox" id="imageBox14"> <div class="imageBox_theImage" style="background-image:url('images/image15.jpg')"></div> <div class="imageBox_label"><span>Image number 15</span></div> </div> </div> <div id="insertionMarker"> <img src="images/marker_top.gif"> <img src="images/marker_middle.gif" id="insertionMarkerLine"> <img src="images/marker_bottom.gif"> </div> <div id="dragDropContent"> </div> <textarea name="debug" id="debug" cols="70" rows="8"></textarea> |