Skip to main content
本文から 1578 文字削除; タイトルを編集
ソース リンク
lix
  • 57
  • 1
  • 5

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

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

<div id="dragitemlist">
<ul class=";draglist;droparea">
<li><span class="dragparts"><a href="#"><img src="0.png" /></a></span></li>
</ul>
</div>

<div id="droparea"></div>
<p class=";val;drop1">;</p>;

js

$(function(){
    $('ul.draglist li').each(function(i){
 
        // 制御用ナンバリング追加
        $(this).attr('id','list' + (i + 1).toString())<p>;
        $(this).children('span').attr('id','item' + (i + ドロップ領域1).toString())<;
 
        $(this).attr('rel',(i + 1).toString())/p>;
        $(this).children('span').attr('rel',(i +<div class="box1).toString());
 
        $(this).addClass('disposition')"><;
 
        // 暗転画像クローン生成
        var imgClone = $(this).children('.dragparts').children('a').html()div>;
        $(this).prepend('<;span;p class=";imgblank";val1";>;' + (imgClone) + '<;<;/spanp>;');
        $('.imgblank').css({top:'0',left:'0',position:'absolute',opacity:'0.8'})<;
        
  


        
        dragParts()/div>;
        function dragParts(){
            

js

$('.dragparts,.dragparts_drop').draggable({
                revert:'invalid',
                zIndex:'drop1000'
            });
        }
        
        
 
 
        // 「#droparea」エリアにドロップされた時の処理
        $('#droparea').droppable({
            accept: '.dragpartsred,.blue',
            tolerance: 'touch'fit',
            hoverClassactiveClass: "areahover"'active',
            activatehoverClass: function(ev, ui){
                var pos = ui.position;
            }'hover',
            drop: function(eve, ui) {
                ui.draggable.prependTo(this).removeClass('dragparts').addClass('dragparts_drop').css({top:'0',left:'0'dragout'});
                dragPartsboxDropping();
            }
        });
 
        // 「#dragitemlist」エリアにドロップされた時の処理
       ui, $('#dragitemlist'this).droppable({);
           flg accept:= '.dragparts_drop',false;
            tolerance: 'touch'},
            dropdeactivate: function(eve, ui) {
                var thisRel = ui.draggable.attrdraggable('rel');
                var adjustRel = thisRel-1;
             { revert: flg $('.disposition').eq(adjustRel).each(function(}){;
                 var obj = ui.draggable.appendTo(this).removeClass('dragparts_drop').addClassattr('dragparts'class').csssplit({top:'0',left:'0'}" ");
              if(obj[0] != 'blue' && flg == dragParts(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;
        });
    }
});

このような感じですが一度ドラッグすると2回目のドラッグができないのこれが原因な数字は増やせたかともですが、減らすにはどうすればいでしょうか
思っていますがここからなかなか進まず困っていますよろしくよろしくお願い致します。

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

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

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

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

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

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

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

本文に 406 文字追加
ソース リンク
BLUEPIXY
  • 6,907
  • 1
  • 21
  • 34
  • js

    <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>
    

    $(function(){
    $('ul.draglist li').each(function(i){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;
            });
        }
    });
    

    //カウントの部分
    $(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;
    });
    }
    });

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

    <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;
            });
        }
    });
    
    ソース リンク
    lix
    • 57
    • 1
    • 5

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

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

    html

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