永远不会触发可排序对象中的"Out"事件

Question

我的网页上有一个可排序的（由嵌套<div></div>组成）。我希望从可排序对象中删除从可排序对象中拖出的项目。但是我无法触发"out"事件。

这是我的JS（灵感来自这个SO问题）：

    $(function(){
        var removeIntent = false;
        $('#selectedTags').sortable({
            over: function () {
                removeIntent = false;
                console.log("over: "+removeIntent);
            },
            out: function () {
                removeIntent = true;
                console.log("over: "+removeIntent);
            },
            beforeStop: function (event, ui) {
                console.log("over: "+removeIntent);
                if(removeIntent){
                    ui.item.remove();   
                }
            }
        });
    });

你会在这里找到我的jsFiddle。

欢迎所有帮助。

编辑：如果我将我的div转换为<ul></ul>，它就会按计划工作。有什么解释吗？我想保留<div></div>，因为我需要可排序的是水平的。

Answer 1

刚刚检查了你的小提琴; 似乎 CSS

#selectedTags > div {float: left;
}

是实际导致输出不被触发的原因。只是一个指针！

Answer 2

简单修复：只需使用水平列表格式，而不是专注于<div></div>内容。

我仍然不知道为什么out事件不适用于div。

所以在这里做到这一点的方法

    #menu ul{
      list-style: none;
    }
    #menu li{
      display: inline;
    }