JAvascriptは画像ドラッグの順序変更を完璧に実現

Webページでは、複数の要素の位置を変更する必要があり、要素をドラッグすることで実現できます.HTML 5には、true/falseを設定することで要素がドラッグ可能かどうかを制御するグローバル属性draggableが追加されています.
次に、画像ドラッグを例に、jQueryで実現します.ページに複数の画像があり、1つの画像を他の2つの画像の間にドラッグすると、この画像の位置を2つの図の間に挿入することができます.
 

html>







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script>

	$(document).ready(function() {

		

		//           DIV

		var $srcImgDiv = null;



		//     

		$(".img-div img").bind("dragstart", function() {

			$srcImgDiv = $(this).parent();

		});



		//    .drop-left,.drop-right        

		$(".drop-left,.drop-right").bind("dragover", function(event) {

			

			//     event.preventDefault()       

			event.preventDefault();

		});



		//            

		$(".drop-left").bind("drop", function(event) {

			event.preventDefault();

			if($srcImgDiv[0] != $(this).parent()[0]) {

				$(this).parent().before($srcImgDiv);

			}

		});

		$(".drop-right").bind("drop", function(event) {

			event.preventDefault();

			if($srcImgDiv[0] != $(this).parent()[0]) {

				$(this).parent().after($srcImgDiv);

			}

		});





	});

</script>

 
 
 
 
 
 
 
 
dragstartは要素のドラッグを開始するイベントであり、dragoverは要素の上にドラッグするイベントであり、dropはドラッグを終了してマウスを離すイベントである.
 
draggable=「true」は、img要素がドラッグ可能であることを示しますが、実際にはimgはデフォルトでドラッグ可能なので、この属性も削除できます.div要素をドラッグする場合はdraggable=「true」を設定する必要があります.
classはdrop-leftとdrop-rightのdiv要素をピクチャの左右側に配置し、他のピクチャを受信してこの位置にドラッグするために使用される.