こんばんわ
要素をドロップするとカウントが増え、ドロップエリアから外すとカウントが減るという動作を要素別にしたいです。
ほんとはドロップするとクローンを作り、繰り返しドロップができるようにしたいです
。以下のようなかんじでやってみましたがうまくできませんので教えていただきたいです
よろしくお願いします
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();
}