jQuery removeClass 不适用于可拖动

Question

所以我正在尝试制定一个时间表 table 可以将讲座从一个单元格拖到另一个单元格，除非新单元格已经有一个讲座，在这种情况下拖动将被拒绝。我试图通过在单元格中添加和删除 class 'has_lecture' 来指示它是否允许移动单元格来做到这一点。这是我的代码..但由于某种原因，删除 class 不起作用。

$(".draggable").draggable({
            revert: 'invalid'
        });

        $(".droppable").droppable({
            accept: function () {
                return (!$(this).hasClass('has_lecture'))
            },
            drop: function (event, ui) {
                var $this = $(this);
                ui.draggable.position({
                    my: "center",
                    at: "center",
                    of: $this,
                    using: function (pos) {
                        $(this).animate(pos, 200, "linear");
                    }
                });
                $(this).addClass('has_lecture')

            },
            out: function () {
                    // this line doesn't work
                    $(this).removeClass('has_lecture')
            }
        });

Answer 1

接受函数运行每当 draggable 移动到 droppable 上时。这意味着它会检查你何时拖入，它也会检查你何时拖出。将其放入并设置 has_lecture class 后，您尝试将其拖出时接受函数运行s，因为它具有 has_lecture class，它总是 returns false，永远不会给你的 out 函数一个运行.

的机会

所以，了解这种意外行为，想法是：如果拖放区是空的，它应该只在没有 has_lecture class 的情况下接受。但如果 dropzone 不为空，它应该继续接受当前位于其中的元素。这将允许您将其拖出。所以，一旦你将一个元素拖入拖放区，通过 $(this).data('dropped', ui.draggable) 存储对拖放区元素的引用，现在你的接受函数可以检查你是否试图拖入或出来的是已经拖进来的

(HTML 和 css 已添加，因此代码段将运行)

$(function () {
    $(".draggable").draggable({
        // revert: 'invalid'
    });

    $(".droppable").droppable({
        accept: function (draggable) {
            // new code: new accept clause, accept is not has_lecture OR if the element already dragged onto it is the one you are attempting to drag out
            return (!$(this).hasClass('has_lecture') || $(this).data('dropped') && $(this).data('dropped').is(draggable))
        },
        drop: function (event, ui) {
            var $this = $(this); // << your existing code
            ui.draggable.position({ // << your existing code
                my: "center", // << your existing code
                at: "center", // << your existing code
                of: $this, // << your existing code
                using: function (pos) { // << your existing code
                    $(this).animate(pos, 200, "linear"); // << your existing code
                } // << your existing code
            }); // << your existing code

            $this.addClass('has_lecture'); // << your existing code
            // new code: store a reference to the dropped element on the drop zone
            $this.data('dropped', ui.draggable)

        },
        out: function () {
            $(this).removeClass('has_lecture'); // << your existing code
            // new code: once you have moved it out, then delete the reference to it since your drop zone is now empty again
            $(this).data('dropped', null);
        }
    });
});

    .draggable {
        width: 90px;
        height: 90px;
        padding: 0.5em;
        float: left;
        margin: 10px 10px 10px 0;
        border: 1px solid black;
    }

    .droppable {
        width: 120px;
        height: 120px;
        padding: 0.5em;
        float: left;
        margin: 10px;
        border: 1px solid black;
    }

    h3 {
        clear: left;
    }

    .has_lecture {
        background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div class="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div class="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div class="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

jQuery removeClass 不适用于可拖动

jQuery removeClass not working with draggable

javascript

jquery

jquery-ui-draggable