js實作圖片拖曳改變順序附圖_javascript技巧

在web頁面中，需要改變多個元素的位置，可以透過元素拖曳來實現。 HTML5中加入了一個全域屬性draggable，透過設定true/false來控制元素是否可拖曳。

下面以圖片拖曳為例，用jQuery來實現：頁面上有多個圖片，把一個圖片拖曳到其他兩張圖片中間，就可以將這個圖片的位置插入到兩圖之間。

複製程式碼 代碼如下:

<script> <BR>$(document).ready(function() { <br><br>// 正在拖曳的圖片的父級DIV <BR>var $srcImgDiv = null; <BR><BR> // 開始拖曳<br>$(".img-div img").bind("dragstart", function() { <br>$srcImgDiv = $(this).parent(); <BR>}); <br><br>// 拖曳到.drop-left,.drop-right上方時觸發的事件<BR>$(".drop-left,.drop-right").bind("dragover", function (event) { <BR><br>// 必須透過event.preventDefault()來設定允許拖曳<br>event.preventDefault(); <BR>}); <BR><BR>// 結束拖曳放開滑鼠的事件<BR>$(".drop-left").bind("drop", function(event) { <BR>event.preventDefault(); <BR>if($srcImgDiv[0] != $(this).parent()[0]) { <BR>$(this).parent().before($srcImgDiv); <BR>} <BR>}); <BR>$(".drop- right").bind("drop", function(event) { <BR>event.preventDefault(); <BR>if($srcImgDiv[0] != $(this).parent()[0]) { <br>$(this).parent().after($srcImgDiv); <br>} <BR>}); <BR><BR>}); <BR></script>

dragstart是開始拖曳元素的事件，dragover是拖曳到元素上方的事件，drop是拖曳結束放開滑鼠的事件。

draggable="true"表示img元素是可以拖曳的，不過實際上img預設就是可拖曳的，所以這個屬性也可以去掉，如果要拖曳div元素那麼就需要設定draggable= "true"。
class為drop-left和drop-right的div元素放在圖片的左右側，用於接收其他圖片拖曳到這個位置。