こんにちは
画像を特定の要素にドロップすると数字が増え、どかすと減るようにしたいです。
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;
});
}
});
このような感じですがドラッグで数字は増やせたのですが、減らすにはどうすればいでしょうか
よろしくお願い致します。