Jquery / JavaScript：如何将可放置框限制为仅接受一个拖动项，并替换？

Question

因此，我已经创建了拖放框，其中可拖动项目来自单词库框，并且可以放置在许多其他框中，包括放回到单词库框中。但是，我不确定如何做几件事....

1）如何将每箱接受的可拖动项目限制为1项（显然不包括单词库）。现在，下拉框接受来自单词库的无限量项目。

2）如果用户尝试将第二个项目拖到单个投递箱中，旧项目将恢复为单词库，新项目将取代它。

这是我的HTML代码：

    //This is the original word bank box
    <ul id="items1" class="items list-inline dropBox wordBox">
        <li class="list-inline-item g">Item 1-1</li>
        <li class="list-inline-item g">Item 1-2</li>
        <li class="list-inline-item o">Item 1-3</li>
        <li class="list-inline-item o">Item 1-4</li>
        <li class="list-inline-item g">Item 1-5</li>
        <li class="list-inline-item o">Item 1-6</li>    
    </ul>

    //These are two drop/target boxes
    <div id="items2" class="items dropBox targetBoxes"></div>
    <div id="items3" class="items dropBox targetBoxes"></div>

这是我的JavaScript代码：

$("#items1,#items2,#items3").sortable({
    connectWith: ".items,#items2,#items3",
    start: function (event, ui) {
        ui.item.toggleClass("highlight");
    },
    stop: function (event, ui) {
        ui.item.toggleClass("highlight");
    }
 });
 $("#items1,#items2,#items3").disableSelection();

谢谢，我感谢任何帮助。