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>

Go to Step – 3

Tweet This Post

Drag and Drop div area with pure javascript – Step 2

You may also like these related posts

Categories

Latest comments

Archives

By Google