如果在Jquery中的droppable中删除了draggable，如何设置结果？

I am trying to increase the value of a counter (var counter = 0;), if the draggable image on screen is dropped into the dropzone (also a image, not a div).

如果屏幕上的可拖动图像被放入dropzone（也是图像，而不是div），我试图增加计数器的值（var counter = 0;）。

$( "#goldbag" ).draggable({ revert: "invalid", containment: "parent" });
$( "#jack2" ).droppable({
    drop: function(event, ui) {
        draggedObj = ui.draggable.attr('id'); 
        $("#"+draggedObj).fadeOut(function() { $(this).remove(); });
        $( "img" ).draggable({ disabled: true });
    }
});

This code just fades out the droppable after its dropped on the image. Before/after it fades out I want to increment the counter by 1.

此代码在放置在图像上之后淡出了droppable。在淡出之前/之后我想将计数器递增1。

Note: Both #goldbag and #jack2 are images (<img>) inside a single container div.

注意：#goldbag和＃jack2都是单个容器div中的图像（如果在Jquery中的droppable中删除了draggable，如何设置结果？）。

1 个解决方案

#1

You can just extend your drop callback function. Here is an over simplified example, where you can drag and drop the same item multiple times while increasing a counter.

你可以扩展你的drop call函数。这是一个简化的示例，您可以在增加计数器的同时多次拖放相同的项目。

Most of this code was taken from the docs here: https://jqueryui.com/droppable/#default

这些代码大部分来自这里的文档：https：//jqueryui.com/droppable/#default

$(function() {
  var $counter = $("#counter");
  var count = 0;
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
      count++;
      $counter.html(count);
    }
  });
});

#draggable {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}
#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>


<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<p>Counter: <span id="counter">0</span>
</p>

#1