jQueryUIでドラッグアンドドロップする

jQuery UIでサムネイル画像をドラッグアンドドロップして大きく表示します。

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

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

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

body部分にはサムネイル画像が3つと、大きく表示する部分が一つです。

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

  $(".img_large").droppable({
    drop:function(event,ui){
      $(".img_large").fadeOut("normal",function(){
        // 画像差し替え
        $(".img_large").attr("src",ui.draggable.attr("src"));

        $(".img_large").fadeIn();
      });
    }
  });
});
</script>
<img src="../images/jQuery_UI1.png" width="300px" height="80px" class="img_small" />
<img src="../images/jQuery_UI2.png" width="300px" height="80px" class="img_small" />
<img src="../images/jQuery_UI3.png" width="300px" height="80px" class="img_small" />
<br /><br /><br /><br />
<img src="../images/jQuery_UI1.png" width="600px" height="160px" class="img_large" />
</body>

<body>

$(function(){

$(".img_small").draggable();

$(".img_large").droppable({

drop:function(event,ui){

$(".img_large").fadeOut("normal",function(){

// 画像差し替え

$(".img_large").attr("src",ui.draggable.attr("src"));

$(".img_large").fadeIn();

});

}

});

</script>

</body>

droppable内でドロップした時のイベントをdrop:～に記述することにより、画像を表示することができます。

DEMO

但し、これではドラッグしたサムネイル画像がドラッグした位置に移動してしまいます。

これを回避するには要素を移動せずに複製を移動するhelper:cloneオプションを指定します。

$(".img_small").draggable({helper:"clone"});

1	$(".img_small").draggable({helper:"clone"});

これでドラッグアンドドロップすることにより画像が差し替えられるようになります。

DEMO

jquery.uiの詳細はこちらをどうぞ。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格：少額短期保険募集人,FP3級