如何在已转移物料后使物料停止向后拖动（可拖动，可拖放）

Question

我有一个模块，制作一个可拖动物品，它必须可以转移到第二个或第三个框中。 注意：如果用户强行将其移至第二个框中，则该项目一定不能放回。如果用户强行将其提醒到下一个框中已设置该项目。 >

场景： 如果用户将商品放置在（订单2框）中，则用户切勿再次将商品再次放置在（订单1框）

中

示例在这里，

我的HTML代码：

<div class="jumbotron">
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div id="launchPad">    
                <div class="card">
                    apple
                </div> 
                <div class="card">
                    orange
                </div> 
                <div class="card">
                    banana
                </div> 
                <div class="card">
                    car
                </div> 
                <div class="card">
                    bus
                </div> 
            </div>
        </div>
        <div class="col-md-3">
            <div id="dropZone">
                <div class="stack">
                    <div class="stackHdr">
                        Order 1 here 
                    </div>
                    <div class="stackDrop1">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div id="dropZone">
                <div class="stack">
                    <div class="stackHdr">
                        Order 2 here 
                    </div>
                    <div class="stackDrop2">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div id="dropZone">
                <div class="stack">
                    <div class="stackHdr">
                        Order 3 here 
                    </div>
                    <div class="stackDrop3">

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

我的Jquery代码：

    $(document).ready(function(){

    $(".card").draggable({
        appendTo: "body",
        cursor: "move",
        helper: 'clone',

    });

    $("#launchPad").draggable({
        tolerance: "intersect",
        accept: ".card",

        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            $("#launchPad").append($(ui.draggable));
        }
    });

    $(".stackDrop1").droppable({
        tolerance: "intersect",
        accept: ".card",
        revert: 'invalid',
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {        
            $(this).append($(ui.draggable));
            alert('In the kitchen');
        }
    });

    $(".stackDrop2").droppable({
        tolerance: "intersect",
        accept: ".card",

        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {        
            $(this).append($(ui.draggable));
            alert('On the road');
        }
    });

    $(".stackDrop3").droppable({
        tolerance: "intersect",
        accept: ".card",

        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {        
            $(this).append($(ui.draggable));
            alert('Completed');
        }
    });
})