9892
こんにちは  
画像を特定の要素にドロップすると数字が増え、どかすと減るようにしたいです。

html

```

    <div class="droparea">
        <div class="drop1">
            <p>ドロップ領域1</p>
            <div class="box1"></div>
            <p class="val1"></p>
        </div>
    
```

  
  
  
  
  
  
  
  
  
  
  

js

```

    $('.drop1').droppable({
        accept: '.red,.blue',
        tolerance: 'fit',
        activeClass: 'active',
        hoverClass: 'hover',
        drop: function(e, ui) {
            ui.draggable.removeClass('dragout');
            boxDropping(ui, $(this));
            flg = false;
        },
        deactivate: function(e, ui) {
            ui.draggable.draggable({ revert: flg });
            var obj = ui.draggable.attr('class').split(" ");
            if(obj[0] != 'blue' && flg == false) {
                flg = true;
            }
        }
    });
    
    
    
    
    
     //カウントの部分
    
    $(function() {
        function boxDropping(ui, obj) {
            var tag = '';
            var flg = true;
            $('div',obj).each(function(i) {
                if($(this).attr('class') == ui.draggable.attr('class')) {
                    tag = 'p.val' + (i + 1);
                    if($(tag,obj).text()) {
                        var arr = $(tag,obj).text().split(" ");
                        var val = parseInt(arr[1]) + 1;
                    } else {
                        var val = 2;
                    }
                    $(tag,obj).text('× ' + val);
                    flg = false;
                } else {
                    tag = 'div.box' + (i + 1);
                    if($(tag,obj).size()) {
                        $(tag,obj).addClass(ui.draggable.attr('class'));
                        $(tag,obj).html(ui.draggable.html());
                        $(tag,obj).removeClass('box' + (i + 1));
                        flg = false;
                    }
                }
                return flg;
            });
        }
    });
    
```

このような感じですがドラッグで数字は増やせたのですが、減らすにはどうすればいでしょうか  
よろしくお願い致します。
CC BY-SA 3.0
2015-05-07T04:20:01.700
9880
2015-05-07T15:21:21.087
2015-05-07T06:39:30.627
9630
9630
question
jquery jquery-ui
jqueryで画像のドラッグアンドドロップでカウントを増減させたい
[jQuery UIを利用して要素をドラッグアンドドロップさせてみる](http://liginc.co.jp/web/js/jquery/102848)  
を流用させていただきましたが、こんなイメージでしょうか。  
※判定とか足りていませんがご容赦ください。

```

    $(function() {
      var counter = 0;
      $(".dragItem").draggable();
    
      $("#droparea").droppable({
        accept: ".dragItem",
        drop: function(event, ui) {
          //  dragされてきたオブジェクトを取得してクローン作製
          var dragId = ui.draggable.attr("id");
          if($(this).find(".drop" + dragId).length == 0){
            $('#cnt').text(++counter);
          }
        },
        out: function(event, ui) {
          var dragId = ui.draggable.attr("id");
          $(this).find(".drop" + dragId).remove();
          $('#cnt').text(--counter);
        }
      });
    });
```

```

    .flex-container
    {
      display: flex;
    }
    
    .dragItems {
      width: 400px;
      height: 120px;
    }
    
    .dragItem {
      width: 100px;
      height: 100px;
      margin: 5px;
      color: #fff;
      text-align: center;
      font-size: 12px;
    }
    
    #div1 {
      background: red;
    }
    
    #div2 {
      background: blue;
    }
    
    #div3 {
      background: green;
    }
    
    #droparea {
      width: 200px;
      height: 200px;
      font-size: 13px;
      background: gray;
    }
```

```

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
    <div class="flex-container dragItems">
      <div id="div1" class="dragItem">
        グレーに置いてね1
      </div>
      <div id="div2" class="dragItem">
        グレーに置いてね2
      </div>
      <div id="div3" class="dragItem">
        グレーに置いてね3
      </div>
    </div>
    
    <div id="droparea">
      ここにおけるよ<br />
      置かれた数：<span id="cnt">0</span>
    </div>
```
CC BY-SA 3.0
2015-05-07T07:59:23.700
9892
2015-05-07T15:21:21.087
2015-05-07T15:21:21.087
3516
3516
9880
answer