我有一些带有droppable类“dropBox”的jQuery div;我想接受带有“teamBox”类的div，但前提是它们不存在于droppable“dropBox”容器中。我已经尝试通过对dropBox使用accept事件来做到这一点，但发现检查dropBox是否包含draggable元素总是返回true。我也尝试在dropBox的<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>
部分放置一个条件，但我遇到了同样的问题。以下两种尝试的代码。谢谢！
HTML
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,
});
}
});
{{1}}
修改 最后提出了一个适合我的解决方案。这是a Fiddle。请记住，我正在使用Laravel Spark，因此HTML中的Laravel刀片语法无法在小提琴中正确编译。但是，查看代码可能会让您了解如何使用克隆和拒绝重复的可拖动项目来创建拖放系统。
答案 0 :(得分：0)
我会在draggable使用revert：
$(".teamBox").draggable({
helper: 'clone',
zIndex: 1,
revert: function(){
return $(".dropBox .teamBox").length ? true : false;
}
});
参考：http://api.jqueryui.com/draggable/#option-revert
拖动停止时元素是否应恢复到其起始位置。
功能：确定元素是否应恢复到其起始位置的函数。该函数必须返回
true才能还原元素。