如何确定子元素是否在包含的祖先之外？

Question

我有一个容器div 内的列表项。结构如下：

<div id="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

我正在使用 jQuery sortable 交换列表项，如图here。

我想确定列表项是否被拖到包含div之外，如果是，则将其删除。

我一直在尝试做的是使用offset() 来确定列表项与div 的距离，但它给了我不一致的结果：

$( ".sortable" ).sortable({
    revert: true,
    update: function( event, ui ) {
        console.log("difference: " + (parseInt($(ui.item).offset().top,10) - parseInt($("#importer-container").offset().top,10)) );
    }
});

有时会显示 1。有时会显示 26。容器 div 有一个滚动条，如果这很重要的话。

如何确定孩子是否在父母之外？

Answer 1

$( ".sortable" ).sortable({
    revert: true,
    update: function( event, ui ) {
        if (ui.item.closest("#container").length) {
            // inside container
        } else {
            // outside container
        }
    }
});

http://api.jquery.com/closest/