jQuery Droppablesでドロップ処理も超簡単(2ページ目)

サンプル

ドロップの簡単なサンプルを試してみます。いくつかのドラッグアイテムをドロップエリアにドロップすると、アイテムに書かれた価格がリストアップされて合計金額も表示されるというものです。

Droppablesも、引数のオプションでいろいろ設定できますので、最新のものはOptionsや UI/Droppablesあるいは、 デモ などでご参照ください。

 

 

ソースは次のとおり

<style type="text/css">

.sel-items{ float  : left }
#sum { font-weight : 900  }
#droptitle{ padding: 10px }

.drag { 
  width   : 120px   ; 
  height  : 50px    ; 
  padding : 10px    ; 
  font    : 12px monospace;
  background-color : #B9FF04 ; 
  border  :1px solid #0f6;
  margin  : 10px;
}

.drop { 
  width   : 280px   ; 
  height  : 350px   ; 
  padding : 10px    ; 
  background-color  : #eee ; 
  border  : 2px dotted #bbb;
  float   : right   ;
}

.droppable-hover{
  background-color : #aaa ; 
}
</style>

<p>
<div class="sel-items">
  <div id="item1" class="drag">
    Item-1 : <span class="yen">2,000円</span>
  </div>
  <div id="item2" class="drag">
    Item-2 : <span class="yen">4,980円</span>
  </div>
  <div id="item3" class="drag">
    Item-3 : <span class="yen">3,980円</span>
  </div>
</div>

<div id="drop1" class="drop">
<p id="droptitle">■ここへドロップしてください</p>
<hr>合計
<div id="sum"></div><hr>
</div>

<br clear="all">
</p>

<script type="text/javascript">   
jQuery(function($) {

  //dragオプション
  var dragOptions={
    opacity : '0.5',
    helper  : 'clone',
    revert  : true 
  }
  
  //合計
  var sum = 0, 
  //合算
  count=function(str){
    return sum += parseInt(
      str.replace('円','').replace(',',''),10
    );
  },
  //3桁カンマ
  insertComma=function (sourceStr) {
    return (""+sourceStr).match(/./g).reverse().join("")
    .replace(/(?d{3})/g,"$1,")
    .match(/./g).reverse().join("").replace(/^,/,"");
  }

   //ドラッグ設定
  $('#item1').draggable(dragOptions);
  $('#item2').draggable(dragOptions);
  $('#item3').draggable(dragOptions);
  
  //ドロップ設定
  $('#drop1').droppable({
    accept      : '.drag',
    activeClass : 'droppable-hover',
    drop        : function(e, ui){
      var yen=$('.yen',ui.element).html();
      if(yen){
        data=ui.element.id+' : '+yen+'<br>';
        count(yen);
        $(this).append(data)
               .find('#sum').text(insertComma(sum)+'円').end();
      }
    }
  });

});
</script>