Jquery：防止将可拖放项拖放到某些可拖放div之外

我试图在一个学习应用程序中实现一个

拖放功能

这是一个很好的工作方式，将一个项目放到一个可拖放的区域就可以正常工作

// Adding drop function to each category
        jQuery.each(codes, function (index, value) {
            jQuery(value).droppable({
                drop: function (event, ui) {
                 //additional logic here
                }
            });
        });

但是，如果我拖动我的项目，并把它们留在一个不可移动的区域，那么它也会留在那里

请帮助我使项目仅可拖放到某些分区，如果它们位于这些区域之外，则应返回原始位置

我做了一把小提琴样品：

正如webeno在他的评论中所指出的，本文给出了一些示例，说明了如果不将可拖动元素放置在可拖放区域上，如何使其恢复到原始位置。我已经修改了您的小提琴，将选项添加到可拖动上，使其在放置在无效（不可拖放）区域时能够恢复位置：

$（“#draggable”）.draggable（{revert:“invalid”}）

您看过……了吗。。。？。。。或者更好的是，jQueryUI的可拖放性不是您正在寻找的吗。。。？