こんにちは
画像を特定の要素にドラッグアンドドロップすると数字がカウントされるようにしたいです
html
<div id="dragitemlist">
<ul class="draglist">
<li><span class="dragparts"><a href="#"><img src="0.png" /></a></span></li>
</ul>
</div>
<div id="droparea"></div>
<p class="val1"></p>
js
$(function(){
$('ul.draglist li').each(function(i){
// 制御用ナンバリング追加
$(this).attr('id','list' + (i + 1).toString());
$(this).children('span').attr('id','item' + (i + 1).toString());
$(this).attr('rel',(i + 1).toString());
$(this).children('span').attr('rel',(i + 1).toString());
$(this).addClass('disposition');
// 暗転画像クローン生成
var imgClone = $(this).children('.dragparts').children('a').html();
$(this).prepend('<span class="imgblank">' + (imgClone) + '</span>');
$('.imgblank').css({top:'0',left:'0',position:'absolute',opacity:'0.8'});
dragParts();
function dragParts(){
$('.dragparts,.dragparts_drop').draggable({
revert:'invalid',
zIndex:'1000'
});
}
// 「#droparea」エリアにドロップされた時の処理
$('#droparea').droppable({
accept: '.dragparts',
tolerance: 'touch',
hoverClass: "areahover",
activate: function(ev, ui){
var pos = ui.position;
},
drop: function(ev, ui){
ui.draggable.prependTo(this).removeClass('dragparts').addClass('dragparts_drop').css({top:'0',left:'0'});
dragParts();
}
});
// 「#dragitemlist」エリアにドロップされた時の処理
$('#dragitemlist').droppable({
accept: '.dragparts_drop',
tolerance: 'touch',
drop: function(ev, ui){
var thisRel = ui.draggable.attr('rel');
var adjustRel = thisRel-1;
$('.disposition').eq(adjustRel).each(function(){
ui.draggable.appendTo(this).removeClass('dragparts_drop').addClass('dragparts').css({top:'0',left:'0'});
dragParts();
});
}
});
//カウントの部分
$(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;
});
}
});
このような感じですが一度ドラッグすると2回目のドラッグができないのでこれが原因なのかとも
思っていますがここからなかなか進まず困っていますよろしくお願い致します。