jQuery 拒绝 Droppable 中已有的可拖动元素

Question

我有一些 jQuery div 可放置 class "dropBox"；我想接受带有 class "teamBox" 的 div，但前提是它们不存在于可放置的 "dropBox" 容器中。我已经尝试通过对 dropBox 使用 over 事件来执行此操作，但发现检查 dropBox 是否包含可拖动元素总是返回 true。我也尝试在 dropBox 的 accept 部分放置一个条件，但我遇到了同样的问题。以下两种尝试的代码。谢谢！

HTML

<div class="panel-heading">Teams</div>
<div class="panel-body teamContainer">
    @foreach($teamContent as $teamID => $teamName)
        <div id="{{ $teamID }}" class="teamBox">
            <h5><b>{{ $teamName }}</b></h5>
        </div>
    @endforeach
</div>
<div class="panel-heading">Twitter</div>
<div class="panel-body">
    @if(!empty($twitterContent))
        @foreach($twitterContent as $twitterID => $screenName)
            <span class="{{ $twitterID }}">
                <h5>{{ '@' . $screenName }}</h5>
            </span>
            <div id="{{ $twitterID }}" class="dropBox"></div>
        @endforeach
    @endif
</div>
<div class="panel-heading">Facebook</div>
<div class="panel-body">
    @if(!empty($facebookContent))
        @foreach($facebookContent as $pageID => $pageName)
            <span class="{{ $pageID }}">
                <h5>{{ $pageName }}</h5>
            </span>
            <div id="{{ $pageID }}" class="dropBox"></div>
        @endforeach
    @endif
</div>

jQuery 尝试使用 over

$(".teamBox").draggable({
    helper: 'clone',
    zIndex: 1,
});

$(".dropBox").droppable({
    accept: '.teamBox',
    over: function(event, ui) {
        var draggable = ui.draggable;
        var over = $(this);
        if($(over).find($(draggable).attr('id')))
        {
            //Always logs as disabling
            console.log("Disabling");
            $(over).droppable('disable');
        }
    },
    drop: function(event, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(this).append($(dropped).clone());
        $(".dropBox .teamBox").addClass("item");
        $(".item").removeClass("ui-draggable");
        $(".item").draggable({
            zIndex: 1,
        });
    }
});

jQuery 尝试使用 accept

$(".teamBox").draggable({
    helper: 'clone',
    zIndex: 1,
});

$(".dropBox").droppable({
    accept: function(draggable) {
        if($(this).has($(draggable).attr('id'))) {
            //Always returns false
            console.log("Returning false");
            return false;
        }
        return true;
    },
    drop: function(event, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(this).append($(dropped).clone());
        $(".dropBox .teamBox").addClass("item");
        $(".item").removeClass("ui-draggable");
        $(".item").draggable({
            zIndex: 1,
        });
    }
});

编辑最终想出了一个对我有用的解决方案。这里是 a Fiddle。请记住，我使用的是 Laravel Spark，因此 HTML 中的 Laravel blade 语法在 Fiddle 中无法正确编译。但是，查看代码可能会让您了解如何通过克隆和拒绝重复的可拖动项来创建拖放系统。

Answer 1

我会在 draggable 中尝试使用 revert:

$(".teamBox").draggable({
    helper: 'clone',
    zIndex: 1,
    revert: function(){
        return $(".dropBox .teamBox").length ? true : false;
    }
});

参考：http://api.jqueryui.com/draggable/#option-revert

Whether the element should revert to its start position when dragging stops.

Function: A function to determine whether the element should revert to its start position. The function must return true to revert the element.

jQuery 拒绝 Droppable 中已有的可拖动元素

jQuery Deny Draggable Elements Already in Droppable

javascript

jquery

jquery-ui

jquery-ui-draggable

laravel