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

Question

我有一些带有可放置类“dropBox”的jQuery div；我想接受带有“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>

使用over的jQuery尝试

$(".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,
        });
    }
});

使用accept的jQuery尝试

$(".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 刀片语法在 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

拖动停止时元素是否应恢复到其起始位置。

功能： 确定元素是否应恢复到其起始位置的功能。该函数必须返回 true 才能恢复元素。