jQueryUIで並べ替えをする

jQueryUIで並べ替えをする

jQueryUIでサムネイル画像を並べ替えします。

まずjqueryとjquery-ui.min.jsをプリロードします。

<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/jquery-ui.min.js"></script>

body部分にはサムネイル画像が3つです。

div要素にidを指定し、サムネイル画像を囲みます。

<body>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
  $("#images").sortable();
});
</script>

<div id="images">
<img src="../images/jQuery_UI1.png" width="300px" height="80px" class="img" />
<img src="../images/jQuery_UI2.png" width="300px" height="80px" class="img" />
<img src="../images/jQuery_UI3.png" width="300px" height="80px" class="img" />
</div>
</body>

div要素にidを指定し、サムネイル画像を囲みます。これで3つのサムネイルをドラッグして並べ替えることができます。

DEMO

jQueryUIで並べ替えをする

 

コメント

タイトルとURLをコピーしました