Question

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

这是下面的当前页。除一个项目外，每个类别中只有一个项目，当我单击最后一个项目：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", "");
                }
            }
        });
    });

如何设置最大可拖动项的限制可以在jqueryui中放置到可放置类别？

1 个答案: