Javascript 检查HTML元素是否有值或特定的类名，然后还原

我已经使用

jQuery

ui创建了以下拖放功能，它可以正常工作。但我有一些事情是我愿意完成的：

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

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

我可以检查框中是否有可用的元素，但如果框不是空的或类似的，我不确定如何还原框？以前有人做过，也有人想实施它

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

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

$（函数（）{
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”
}).disableSelection（）；
});
#可排序1，#可排序2{
边框：1px实心#eee；
宽度：142px；
最小高度：20px；
列表样式类型：无；
保证金：0；
填充：5px0；
浮动：左；
右边距：10px；
}
#可排序1 li，#可排序2 li{
利润率：0 15px 15px 15px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
}
#可排序1 ul li{
显示：块；
文本对齐：居中；
浮动：左；
}
#可排序2 ul li{
显示：块；
文本对齐：居中；
浮动：左；
}


第1项




第2项




第3项




第4项




第5项


















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

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

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


$（函数（）{
//sortable1和sortable2现在是类
$（“.sortable1，.sortable2”）.sortable({
connectWith:“.connectedSortable”，
/*增加*/
停止：功能（事件、用户界面）{
如果（ui.item.prev（）
$（此）。可排序（“取消”）；
}
},
}).disableSelection（）；
});
.sortable1，
.可排序2{
边框：1px实心#eee；
宽度：142px；
最小高度：20px；
列表样式类型：无；
保证金：0；
填充：5px0；
浮动：左；
右边距：10px；
}
.可悲的1李，
.可悲的2李{
利润率：0 15px 15px 15px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
}
.可悲的1 ul li{
显示：块；
文本对齐：居中；
浮动：左；
}
.可悲的2 ul li{
显示：块；
文本对齐：居中；
浮动：左；
}


第1项




第2项




第3项




第4项




第5项


















@user8512043更新的代码。我相信只有在盒子是空的情况下才允许排序，但我没有彻底测试。我更新了我的帖子。您可以检查一下@AndroidNoobie吗？@user8512043您可能遇到了问题，因为您有多个相同的
id
值<代码>id
值在HTML文档中必须是唯一的。类值可以重复任意多次