Jquery Sortable 允许将项目拖入两组，每组最多 2 个

Question

我试图让人们只能从列表中选择两个项目，但能够选择两次。拖动的列表项甚至可以重复。

我的代码放了两个，然后禁用所有拖放。

目标是您可以将任意两个拖入并从两个下拉列表中取出。

var drag = $('.terms-grid').sortable({
                draggable: "> div.term",
                group: {
                    name: 'group',
                    pull: 'clone',
                    put: false
                },
                animation: 100,
                sort: false,
                onEnd: function(evt){
                    // update
                }
            });

            var drop = $('.terms-selected .drop').sortable({
                group: {
                    name: 'group',
                    pull: true,
                    put: true
                },
                sort: true,
                onAdd: function (evt) {
                    if( $('.terms-selected .drop > div').length >= 2 ){
                        drop.option("disabled", true);
                    }
                },
            });

<div class="terms-grid">
    <div class="term" id="term-1">Term 1</div>
    <div class="term" id="term-2">Term 2</div>
    <div class="term" id="term-3">Term 3</div>
    <div class="term" id="term-4">Term 4</div>
    <div class="term" id="term-5">Term 5</div>
    <div class="term" id="term-6">Term 6</div>
    <div class="term" id="term-7">Term 7</div>
    <div class="term" id="term-8">Term 8</div>
    <div class="term" id="term-9">Term 9</div>
    <div class="term" id="term-10">Term 10</div>
    <div class="term" id="term-11">Term 11</div>
    <div class="term" id="term-12">Term 12</div>
</div>
<div class="terms-selected">
    <div>
        <p>Choose two.</p>
        <div id="internal" class="drop"></div>
        <p>Choose two.</p>
        <div id="external" class="drop"></div>
    </div>
</div>