Как заставить элемент перестать перетаскиваться назад после того, как элемент уже перенесен (Draggable, Droppable) - PullRequest
0 голосов
/ 24 января 2019

У меня есть модуль, сделать перетаскиваемый элемент, и он должен быть перенесен во второй или третий ящик. Примечание. Элемент не должен быть возвращен после того, как элемент перенесен во второй блок, если пользователь заставляет вернуть его в предыдущий блок, предупреждая, что элемент уже установлен в следующем блоке.

Сценарий: Если пользователь поместил элемент в (Поле заказа 2) Пользователь никогда не должен возвращать его обратно в (Поле заказа 1)

Пример здесь, example

Мой 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');
        }
    });
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...