jqueryで画像のドラッグアンドドロップでカウントを増減させたい

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

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;
        });
    }
});

このような感じですがドラッグで数字は増やせたのですが、減らすにはどうすればいでしょうか
よろしくお願い致します。