Web ページで複数の要素の位置を変更する必要がある場合は、要素をドラッグすることで変更できます。 HTML5 では、true/false を設定することで要素をドラッグできるかどうかを制御するグローバル属性 draggable が追加されています。 以下は、jQuery で実装された画像のドラッグの例です。ページ上に複数の画像があり、1 つの画像を他の 2 つの画像の中央にドラッグすると、画像の位置を 2 つの画像の間に挿入できます。間の2つの画像。 コードをコピーします コードは次のとおりです。 <br>幅:200px; <br> >} <br>.img-div { <br>float: 左; <br>} <br>.drop-left,.drop-right { <br>幅: 50px; <br>高さ: 200px; >float: left; <br>} <br> <br><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" ) 上にドラッグするとイベントがトリガーされます。 binding("dragover", function(event) { <br><br>// ドラッグ アンド ドロップを許可するには、event.preventDefault() を渡す必要があります <br>event.preventDefault(); <br>}); 🎜>//マウスのドラッグとリリースを終了します。event<br>$(".drop-left").bind("drop", function(event) { <br>event.preventDefault(); <br> if($ srcImgDiv[0] != $(this).parent()[0]) { <br>$(this).parent().before($srcImgDiv); <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></head> <br><div class="img-div"> <br><div class="drop-left"< <BR><img src="http://photos.tuchong.com/38538/f/6864556.jpg" ドラッグ可能="true"> <br><div class="drop-right" >< ;/div> <br></div> <br><div class="drop-left"><br> <img src="http://photos.tuchong.com/349669/f/6695960.jpg" ドラッグ可能="true"> <br><div class="drop-right">< ;/div> ; <br></div> <br><div class="drop-left"> <br> <img; src="http://photos.tuchong.com/349669/f/6683901.jpg" ドラッグ可能="true"> <br><div class="drop-right"></div> ></div> <br><div class="img-div"> <br><div class="drop-left"> <br><img src=" http://photos.tuchong.com/349669/f/5121337.jpg"raggable="true"> <br><div class="drop-right"></div> <br>< /div> <br></body> <br><br> <br>dragstart は要素のドラッグを開始するイベントです。要素.drop は、ドラッグ後にマウスを放したときのイベントです。 <br><br>draggable="true" は img 要素がドラッグできることを意味しますが、実際には img はデフォルトでドラッグ可能であるため、div 要素をドラッグしたい場合はこの属性を削除することもできます。ドラッグ可能 = "true"。 <br><br>drop-left クラスとdrop-right クラスを持つ Div 要素は、この位置にドラッグされた他の画像を受け取るために画像の左側と右側に配置されます。 <br><br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
