I want to count by element in jquery

Good evening
I would like to do the behavior of dropping elements increases the count, and dropping elements decreases the count.
Actually, I want to clone it when I drop it so that I can drop it repeatedly.
I tried it with the following understanding, but I can't do it well, so please let me know.
Thank you for your cooperation
http://codepen.io/anon/pen/jPwrPR

$(function(){

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

  $("#div3").dropable({
    accept: ".dragDiv", // Specify elements to accept
    drop:function(event,ui){
      //  Retrieve and clone objects that have been dragged
      vardragId=ui.draggable.attr("id");
      if($(this).find(".drop"+dragId).length==0){
        $(this).append('<span class="drop'+dragId+'">'+ui.dragable.text()+' was placed </span>');
      }
    },
    out:function(event,ui){
      vardragId=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>
<divid="div1" class="dragDiv">
  Put it in Grey 1
</div>

<divid="div2" class="dragDiv">
  Put it in Grey 2
</div>


<divid="div3">
  Here it is.
</div>

$("#div3").dropable({
    accept: ".dragDiv", // Specify elements to accept
    drop:function(event,ui){
        //  Retrieve and clone objects that have been dragged
               vardragId=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){
        vardragId=ui.draggable.attr("id");
        $(this).find(".drop"+dragId).remove();
    }

jquery jquery-ui

2022-09-30 20:50

1 Answers

Rather than using out, I think it's easier to control if you have two areas to go back and forth between them (increase or decrease with each drop.

$(function(){

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

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

  $gallery.dropable({
    accept: '#trash li',
    drop:function(event,ui){
      ui.draggable.remove();
      $items.text($("li", $list).length);
    }
  })
  
  $trash.dropable({
    accept: $('li', $gallery),
    drop:function(event,ui){
      varobj=ui.draggable.clone();
      obj.dragable({
        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>

<divid="gallery">
  <ul class="flex">
    <lic class="drag">
      <div class="elem div1">Leave it in gray 1</div>
    </li>
    <lic class="drag">
      <div class="elem div2">Leave it in gray 2</div>
    </li>
  </ul>
</div>
<divid="trash">
  You can put it here :<span id="items">0</span>
  <ul class="flex"></ul>
</div>

2022-09-30 20:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656