在Firefox的边栏或开发者面板上释放鼠标按钮时，如何让jQuery UI“放开”可拖动或可排序的元素？

Question

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

这个新功能（通过在屏幕外拖动删除）的设置比我预期的要复杂一些，但我最终解决了大部分问题。有一件事仍然困扰着我：在Firefox中，当浏览器中除了主浏览器窗口之外还有其他“面板”时，拖放功能会出现问题——例如，书签侧栏（我通常固定在左侧）和开发工具（我通常固定在右侧或底部）。如果我拾取一个可排序的元素，将其拖到其中一个面板后面，然后释放鼠标按钮，jqueryui将继续“保持”该元素（即，继续拖动）。

如何重现问题：

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

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

请注意，这个问题是Firefox特有的。（我正在运行Firefox 51.0.1。）谷歌浏览器没有同样的问题。（当我将Google Chrome中的开发人员工具停靠在底部或右侧时，我可以在开发人员工具区域上发布可排序的项目，并获得所需的行为。）我还没有在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;
     }
}

这是问题的链接