检查HTML元素是否具有值或特定类名并还原

Question

我已经使用jQueryui创建了以下拖放功能，它按预期工作。但我有我愿意完成的事情：

1. 在第一部分中，我想阻止框之间的排序或拖放功能。现在，任何人都可以在第一部分的盒子里放任何数量的物品(特别是第一部分的箱子和它们之间(，一个盒子可以包括所有物品。一个框一次只能包含一个项目。但在这种情况下，第一部分的一个框中的项目只能拖动到第二部分的框中。

2. 同样，如果第一部分的一个项目被拖到第二部分的框中，并且第二部分中的框已经包含一个项目，那么它应该恢复或将返回到第一部分的前一个框。

我可以检查框中是否有可用的元素，但我不确定如果框不是空白或类似的，我如何恢复框？任何人以前都做过，或者有任何实现它的想法。

这是我之前发布的一个帖子，其中一位用户给出了一个完美的解决方案，但它仍然没有什么问题，看起来有点复杂——上一个帖子。在这个线程中，框的元素在某些情况下会重叠。

N.B：创建了两个div部分，第一部分和第二部分，这样您就可以了解我是如何完成任务的，并且易于理解。

$(function () {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});

#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 15px 15px 15px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
#sortable1 ul li {
display: block;
text-align: center;
float: left;
}
#sortable2 ul li {
display: block;
text-align: center;
float: left;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!--First Part-->
<div class="col-md-5">
<div class="col-md-12">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
</ul>
</div><br />
<div class="col-md-12">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 2</li>
</ul>
</div><br />
<div class="col-md-12">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 3</li>
</ul>
</div><br />
<div class="col-md-12">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 4</li>
</ul>
</div><br />
<div class="col-md-12">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 5</li>
</ul>
</div><br />
</div>
<!--Second Part-->
<div class="col-md-5">
<div class="col-md-12">
<ul id="sortable2" class="connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul id="sortable2" class="connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul id="sortable2" class="connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul id="sortable2" class="connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul id="sortable2" class="connectedSortable">
<li></li>
</ul>
</div>
</div>

更新1：我在脚本部分做了一个小改动，除了一个外，它似乎还能工作。此条件检查ul中是否有li标记。如果找到，它会立即恢复。但问题是，如果它在任何框中找到li标记，那么它将禁用所有其他项目的可拖动功能。是否可以在不创建动态类或类似类的情况下单独维护该功能？

$(function () {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
/* added */
stop: function (event, ui) {
if ($('ul#sortable2 li').length > 1) { //Condition changed here
$(this).sortable("cancel");
}
},
}).disableSelection();
});

Answer 1

您可以使用stop属性定义在触发停止事件时调用的函数。然后，当排序停止时，您可以执行检查并使用sortable中的取消选项来取消排序。

下面是一个使用您的代码的示例。请参阅/* added */部分。

此外，id值在HTML文档中应该是唯一的。我将sortable1和sortable2更改为标记中的类。

$(function() {
// sortable1 and sortable2 are now classes
$(".sortable1, .sortable2").sortable({
connectWith: ".connectedSortable",
/* added */
stop: function(event, ui) {
if (ui.item.prev().closest('ul li').html()) { // replace with any other desired condition(s)
$(this).sortable("cancel");
}
},
}).disableSelection();
});

.sortable1,
.sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
.sortable1 li,
.sortable2 li {
margin: 0 15px 15px 15px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.sortable1 ul li {
display: block;
text-align: center;
float: left;
}
.sortable2 ul li {
display: block;
text-align: center;
float: left;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--First Part-->
<div class="col-md-5">
<div class="col-md-12">
<ul class="sortable1 connectedSortable">
<li class="ui-state-default">Item 1</li>
</ul>
</div><br />
<div class="col-md-12">
<ul class="sortable1 connectedSortable">
<li class="ui-state-default">Item 2</li>
</ul>
</div><br />
<div class="col-md-12">
<ul class="sortable1 connectedSortable">
<li class="ui-state-default">Item 3</li>
</ul>
</div><br />
<div class="col-md-12">
<ul class="sortable1 connectedSortable">
<li class="ui-state-default">Item 4</li>
</ul>
</div><br />
<div class="col-md-12">
<ul class="sortable1 connectedSortable">
<li class="ui-state-default">Item 5</li>
</ul>
</div><br />
</div>
<!--Second Part-->
<div class="col-md-5">
<div class="col-md-12">
<ul class="sortable2 connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul class="sortable2 connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul class="sortable2 connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul class="sortable2 connectedSortable">
<li></li>
</ul>
</div>
<div class="col-md-12">
<ul class="sortable2 connectedSortable">
<li></li>
</ul>
</div>
</div>