1

こんばんわ
要素をドロップするとカウントが増え、ドロップエリアから外すとカウントが減るという動作を要素別にしたいです。
ほんとはドロップするとクローンを作り、繰り返しドロップができるようにしたいです
。以下のようなかんじでやってみましたがうまくできませんので教えていただきたいです
よろしくお願いします
http://codepen.io/anon/pen/jPwrPR

$(function() {

  $(".dragDiv").draggable();

  $("#div3").droppable({
    accept: ".dragDiv", // 受け入れる要素を指定
    drop: function(event, ui) {
      //  dragされてきたオブジェクトを取得してクローン作製
      var dragId = ui.draggable.attr("id");
      if ($(this).find(".drop" + dragId).length == 0) {
        $(this).append('<span class="drop' + dragId + '">' + ui.draggable.text() + 'が置かれたよ</span>');
      }
    },
    out: function(event, ui) {
      var dragId = ui.draggable.attr("id");
      $(this).find(".drop" + dragId).remove();
    }

  });
});
div {
  width: 150px;
  height: 150px;
  margin: 10px;
  color: #fff;
  text-align: center;
}

span {
  display: block;
}

#div1 {
  background: red;
}

#div2 {
  background: blue;
}

#div3 {
  width: 250px;
  height: 250px;
  background: gray;
}


/**
div:nth-child(2n+1){
	background:red;
}

div:nth-child(2n+0){
	background:blue;
}*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="div1" class="dragDiv">
  グレイに置いてね1
</div>

<div id="div2" class="dragDiv">
  グレイに置いてね2
</div>


<div id="div3">
  ここにおけるよ
</div>

$( "#div3" ).droppable({
    accept : ".dragDiv" , // 受け入れる要素を指定
    drop : function(event , ui){
        //  dragされてきたオブジェクトを取得してクローン作製
               var dragId = ui.draggable.attr("id");
        if($(this).find(".drop" + dragId).length == 0){
            $(this).append('<span class="drop' + dragId +'">' + 1 + '</span>');
    elseif($(this).find(".drop" + dragId).length == 1){
      $(.drop).text(2)
    };
        }deleteImage(ui.draggable);
    } ,
    out : function (event , ui){
        var dragId = ui.draggable.attr("id");
        $(this).find(".drop" + dragId).remove();
    }  
1
  • ドラッグ元はそのままでクローンされた要素がドロップエリアに残るような動作ですか?「ドロップエリアから外すとカウントが減る」ことと「繰り返しドロップができるように」を考えると上記のような動作かなとは思いますが、念のため・・・
    – kotatsu
    Commented 2015年6月12日 1:00

1 件の回答 1

1

outを使うより、2つエリアを用意してその間を行き来するようにした方が制御が簡単な気がします(それぞれのdropで増減する)。

$(function() {

  var $gallery = $('#gallery');
  var $trash = $('#trash');
  var $list = $('ul', $trash);
  var $items = $('#items');

  $(".drag").draggable({
      revert: "invalid",
      containment: "document",
      helper: "clone",
      cursor: "move"
  });

  $gallery.droppable({
    accept: '#trash li',
    drop: function(event, ui) {
      ui.draggable.remove();
      $items.text($("li", $list).length);
    }
  })
  
  $trash.droppable({
    accept: $('li', $gallery),
    drop: function(event, ui) {
      var obj = ui.draggable.clone();
      obj.draggable({
        revert: "invalid",
        containment: "document",
        cursor: "move"
      })
      obj.appendTo($list);
      $items.text($("li", $list).length);
    }
  });
});
.flex {
  display: flex;
  flex-wrap: wrap;
}
.elem {
  width: 50px;
  height: 50px;
  margin: 5px;
  color: #fff;
  text-align: center;
}
.elem.div1 {
  background-color: #f00;
}
.elem.div2 {
  background-color: #00f;
}
ul {
  list-style-type: none;
  padding-left: 0;
}
#gallery {
  margin-bottom: 10px;
  width: 500px;
  height: 60px;
  background: #0ff;
}
#trash {
  width: 500px;
  height: 250px;
  background: #808080;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div id="gallery">
  <ul class="flex">
    <li class="drag">
      <div class="elem div1">グレイに置いてね1</div>
    </li>
    <li class="drag">
      <div class="elem div2">グレイに置いてね2</div>
    </li>
  </ul>
</div>
<div id="trash">
  ここに置けるよ:<span id="items">0</span>
  <ul class="flex"></ul>
</div>

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

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