Как установить ограничение на максимальное количество перетаскиваемых предметов, которые могут быть сброшены в категорию отбрасываемых предметов в jqueryui?

Question

Я пытаюсь управлять «ограничивающей» функцией для категории droppable в jqueryui.

Это текущая страница ниже. В каждой категории по 1 элементу, кроме одного, когда я щелкаю последний элемент: Item 8, все категории выделяются, что говорит о том, что я могу перетащить элемент 8 в любую категорию droppable, какую захочу.

Я хочу назначить лимит для каждой категории droppable, чтобы гарантировать, что в эту категорию не будет добавлено больше предметов, чем желаемый лимит. Допустим, предел составляет 1. В этом случае должна выделяться только пустая категория dropabble, а элемент должен быть отброшен только в этой категории. Когда я нажимаю Item 8, ожидаемый результат должен быть таким:

Как мне это сделать? Любая помощь будет так ценится.

Пока мой код указан ниже.

HTML:

<div id="draggable" class="ui-widget-content">
  <ul id="selectable" style="margin-top:2.5px">
    <li id="selectable1" class="ui-widget-content">Item 1</li>
    <li id="selectable2" class="ui-widget-content">Item 2</li>
    <li id="selectable3" class="ui-widget-content">Item 3</li>
    <li id="selectable4" class="ui-widget-content">Item 4</li>
    <li id="selectable5" class="ui-widget-content">Item 5</li>
    <li id="selectable6" class="ui-widget-content">Item 6</li>
    <li id="selectable7" class="ui-widget-content">Item 7</li>
    <li id="selectable8" class="ui-widget-content">Item 8</li>
  </ol>
</div>

<div style="width: 800px; height: 100px; float: left; margin-top: 60px;">
 <fieldset>
      <legend style="color:blue;font-weight:bold;">Schedules</legend>
      <table>
         <tr>
            <td>JAN 1 AM:</td>
            <td><div id="droppable" class="ui-widget-header"></div></td>
            <td><div id="droppable2" class="ui-widget-header"></div></td>
            <td><div id="droppable3" class="ui-widget-header"></div></td>
            <td><div id="droppable4" class="ui-widget-header"></div></td>
         </tr>
         <tr>
            <td>JAN 1 PM:</td>
            <td><div id="droppable5" class="ui-widget-header"></div></td>
            <td><div id="droppable6" class="ui-widget-header"></div></td>
            <td><div id="droppable7" class="ui-widget-header"></div></td>
            <td><div id="droppable8" class="ui-widget-header"></div></td>
         </tr>
      </table>
   </fieldset>
</div> 

JavaScript:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#selectable1" ).draggable();
$( "#selectable2" ).draggable();
$( "#selectable3" ).draggable();
$( "#selectable4" ).draggable();
$( "#selectable5" ).draggable();
$( "#selectable6" ).draggable();
$( "#selectable7" ).draggable();
$( "#selectable8" ).draggable();

$( "#droppable" ).droppable({
  hoverClass: "hover",
  activate: function() {
            $('#droppable').css({
                    border: "1px dashed red",
                    backgroundColor: "yellow"
                });
            },
            deactivate: function() {
                $('#droppable').css("border", "").css("background-color", "");
            }
});
...
...
...
$( "#droppable8" ).droppable({
  hoverClass: "hover",
  activate: function() {
            $('#droppable8').css({
                    border: "1px dashed red",
                    backgroundColor: "yellow"
                });
            },
            deactivate: function() {
                $('#droppable8').css("border", "").css("background-color", "");
            }
}); 
});

Answer 1

Вы можете определить событие drop, добавить переменные limit и counter и управлять ими в функции события сброса, как показано ниже.

// I just randomly filled limit values
var limits = {
        "droppable1" : 3,
        "droppable2" : 4,
        "droppable3" : 5,
        "droppable4" : 3,
        "droppable5" : 4,
        "droppable6" : 5,
        "droppable7" : 3,
        "droppable8" : 4  
    };

    var counters = {
        "droppable1" : 0,
        "droppable2" : 0,
        "droppable3" : 0,
        "droppable4" : 0,
        "droppable5" : 0,
        "droppable6" : 0,
        "droppable7" : 0,
        "droppable8" : 0  
    };

    $('div[id^="droppable"]').each(function() {
        var key = $(this).attr('id');
        $(this).droppable({
            hoverClass: "hover",
            activate: function() {
                    $(this).css({
                            border: "1px dashed red",
                            backgroundColor: "yellow"
                        });
                    },
            deactivate: function() {
                    $(this).css("border", "").css("background-color", "");
                },
            drop: function() {
                counters[key]++;
                if (counters[key] == limits[key]) {
                    $(this).droppable("disable");
                    $(this).css("border", "").css("background-color", "");
                }
            }
        });
    });