Skip to main content
2 / 3
本文に 406 文字追加
BLUEPIXY
  • 6,907
  • 1
  • 21
  • 34

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

こんにちは
画像を特定の要素にドラッグアンドドロップすると数字がカウントされるようにしたいです

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回目のドラッグができないのでこれが原因なのかとも
思っていますがここからなかなか進まず困っていますよろしくお願い致します。

lix
  • 57
  • 1
  • 5