当鼠标按钮在火狐的侧边栏或开发者面板上发布时，我如何使jQuery UI“放开”可拖动或可排序的元素？

Question

我正在开发一个Web应用程序，允许用户通过jQuery UI、可排序和可删除的小部件重新排序和删除屏幕上的项目。最初，我只提供了一种删除项目的方法:将其拖到带有垃圾图标的区域并丢弃它。现在，我添加了一个选项，通过将项目从屏幕边缘拖动并释放鼠标按钮来删除该项目。

这个新特性(通过拖出屏幕删除)比我预期的要复杂一些，但我终于解决了大部分的问题。有一件事仍然困扰着我:在Firefox中，除了主浏览器窗口之外，浏览器中还存在其他“面板”的拖放功能，例如书签侧边栏(我通常将其停靠在左侧)和开发工具(我通常将其停靠在右侧或底部)。如果我拿起一个可排序元素，将其拖到其中一个面板后面，并释放鼠标按钮，jQuery UI将继续“坚持”到该元素(即继续拖动)。

如何重现问题：

1. 转到jQuery UI可排序页面。
2. 按下控件-B显示Firefox的书签侧边栏。
3. 抓取其中一个可排序项，将其拖到书签侧边栏上，然后释放鼠标按钮。
4. 将鼠标移回来自该项目的框中。您将看到，项目仍然坚持在鼠标上，就像被拖动一样，即使您不再按住鼠标按钮。

想要的行为:我希望可排序小部件释放可排序项，就像将指针完全移出浏览器并释放鼠标按钮时一样。

请注意，这个问题是火狐特有的。(我正在运行Firefox 51.0.1。)谷歌Chrome不存在同样的问题。(当我将Google中的开发工具停靠在底部或右侧时，我可以在dev-tools区域释放可排序项，并得到所需的行为。)我还没有在IE，Safari或其他浏览器中进行测试。

提前感谢您的帮助！

Answer 1

几年前我遇到了这个问题。我过去常常强迫游标在身体外释放。

以下是可拖放的解决方案：

var flag=true;
start: function( event, ui ){
    if(flag){
         flag = false;
         $('body').one("mouseleave", function(){
             $('body').one("mouseup", function(){
                 flag = true; //event occured, rebind
                 //do your stuff
              });
          });
     }
     else{
         flag = false;
     }
}

下面是指向问题的链接