如果在Jquery中將dropragable拖放到droppable中，如何設置結果？

Question

如果屏幕上的可拖動圖像放到放置區（也是圖像，而不是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 });
    }
});

此代碼只是在將可放置對象拖放到圖像上后使其淡出。 在它消失之前/之后，我想將計數器增加1。

注意： #goldbag和#jack2都是單個容器div中的圖像（ <img> ）。

Answer 1

您可以擴展您的drop回調函數。 這是一個過於簡化的示例，您可以在增加計數器的同時多次拖放同一項目。

大部分代碼取自以下文檔： 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>