先來看看效果

HTML程式碼

<div id="container">
	<div class="folder" id="file1" draggable="true" ondragstart="drag(event)">檔案1</div>
	<div class="folder" id="file2" draggable="true" ondragstart="drag(event)"
 
>檔案2</div>
	<div class="folder" id="file3" draggable="true" ondragstart="drag(event)">檔案3</div>
	<div class="folder" id="file4" draggable="true" ondragstart="drag(event)">檔案4</div>
</div>
 

<div id="recycle"οndragοver="allowDrop(event)" οndrοp="drop(event)"></div>		

CSS程式碼

#container{border: 1px solid black;padding: 15px;width: 300px;position: absolute;}
.folder{background: url(img/1.png);width: 49px;height: 68px;text-align: center;}
#recycle{background
 
: url(./img/2.png);width: 200px;height: 300px;position: absolute; margin-left: 500px;}

JS程式碼

<script type="text/javascript">
		// ondragstart事件回撥
		function drag(ev){
			//設定傳遞的內容為拖拽元素的id名稱，資料型別為純文字型別
			ev.dataTransfer.setData("text/plain",ev.target.id);
		}
		//ondragover事件回撥
		function allowDrop(ev){
			// 解除當前元素可放置被拖拽元素的區域
			ev.preventDefault();
		}
		//ondrop事件回撥
		function drop(ev){
			ev.preventDefault();
			//獲取當前被放置的元素id名稱
			var id=ev.dataTransfer.getData("text");
			var folder=document.getElementById(id);
			//獲取資料夾區域並刪除該元素物件
			document.getElementById("container").removeChild(folder);
		}
	</script>