Question

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

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

如何重现问题：

转到jQuery UI Sortable页面。
按[control-B]显示Firefox的书签侧边栏。
抓取其中一个可排序的项目，将其拖到书签侧边栏上，然后释放鼠标按钮。
将鼠标移回项目来自的框。即使您没有再按住鼠标按钮，您也会看到该项目仍然像拖动一样粘在鼠标上。

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

请注意，此问题是Firefox特有的。（我正在运行Firefox 51.0.1。）Google Chrome没有同样的问题。（当我将谷歌浏览器中的开发人员工具停靠在底部或右侧时，我可以在开发工具区域发布可排序的项目，我得到了所需的行为。）我没有在IE，Safari或其他方面测试过浏览器。

提前感谢您的帮助！

Answer 1

好吧，几年前我遇到了这个问题。如果光标移出体外，我常常强制释放光标。

以下是draggable的解决方案：

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;
     }
}

以下是question

的链接

当通过Firefox中的侧边栏或开发人员面板释放鼠标按钮时，如何让jQuery UI“放开”可拖动或可排序的元素？

1 个答案: