javascript - 如何设置最大可拖动项目的限制可以放入 jqueryui 中的可放置类别？

Question

我正在尝试为 jqueryui 中的 droppable 类别管理“限制”功能。

这是下面的当前页面。每个类别中有 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 变量，并在 drop 事件函数中控制它们，如下所示。

// 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", "");
                }
            }
        });
    });