1

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

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

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

1
  • ドロップ時に値を更新したいのですか?それともドロップ領域に重なったり抜けたりした際に値を更新したいのですか?
    – kotatsu
    Commented 2015年5月7日 7:49

1 件の回答 1

0

jQuery UIを利用して要素をドラッグアンドドロップさせてみる
を流用させていただきましたが、こんなイメージでしょうか。
※判定とか足りていませんがご容赦ください。

$(function() {
  var counter = 0;
  $(".dragItem").draggable();

  $("#droparea").droppable({
    accept: ".dragItem",
    drop: function(event, ui) {
      //  dragされてきたオブジェクトを取得してクローン作製
      var dragId = ui.draggable.attr("id");
      if($(this).find(".drop" + dragId).length == 0){
        $('#cnt').text(++counter);
      }
    },
    out: function(event, ui) {
      var dragId = ui.draggable.attr("id");
      $(this).find(".drop" + dragId).remove();
      $('#cnt').text(--counter);
    }
  });
});
.flex-container
{
  display: flex;
}

.dragItems {
  width: 400px;
  height: 120px;
}

.dragItem {
  width: 100px;
  height: 100px;
  margin: 5px;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

#div1 {
  background: red;
}

#div2 {
  background: blue;
}

#div3 {
  background: green;
}

#droparea {
  width: 200px;
  height: 200px;
  font-size: 13px;
  background: gray;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div class="flex-container dragItems">
  <div id="div1" class="dragItem">
    グレーに置いてね1
  </div>
  <div id="div2" class="dragItem">
    グレーに置いてね2
  </div>
  <div id="div3" class="dragItem">
    グレーに置いてね3
  </div>
</div>

<div id="droparea">
  ここにおけるよ<br />
  置かれた数:<span id="cnt">0</span>
</div>

1
  • うおおおおおおこんな感じのを求めていました! 下手な説明でここまで丁寧に回答してくださり本当にありがとうございます!
    – lix
    Commented 2015年5月7日 9:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。