Jquery可拖动问题

基本上，我想要的是，当拖动时，如果我走出容器区域并在那里释放鼠标单击，可拖动的元素只会粘附到我离开容器区域的边界上。当我将光标移回时，元素会粘回到光标上。当您只是移动光标（而不是拖动）而元素仍在被拖动时，它看起来并不好看

是一把小提琴。只要在输出区域外拖动并释放光标，您就会得到我所说的内容

我在想两种方法

拖动时将鼠标移动限制在ContaineMeNet区域（我搜索了它，但没有找到如何操作。可能不可能吧？）

如果光标离开容器区域，则将可拖动对象恢复到其位置。（仍然找不到这样做的方法）

有什么方法或更聪明的想法来实现这一点吗

---

相关代码

（用于stackoverflow）

我认为这是因为它位于iframe中。 这就像在浏览器外拖动一样。mouseup事件将不会在页面中注册

看起来chrome不允许，但firefox允许

试试这个：

这是您的解决方案，无需每次设置事件

overkill版本（这将允许用户暂时（1秒）离开iframe并返回，而不会丢失拖动）：

编辑：

要回答您的第一个问题：

您可以通过在选项中添加“包含”来包含可拖动的，即：

$( "#draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    containment: "document" });

但这只能包含拖动到边界框的元素（在本例中为“document”，但也可以是“parent”或“#somediv”）。

---

鼠标光标仍可以移动到iframe之外的任何位置，并从那里发送事件，超出iframe文档的范围。

好的，我找到了解决方法。在IE8和Chrome中工作

为可拖动元素添加了此代码

drag: function(){
     $('body').mouseleave(function(){
          $('body').mouseup();
     });
}

编辑：感谢您指出了该缺陷，我决定使用它来提高性能，并将代码从拖动切换到开始

start: function(){
     $('body').one("mouseleave", function(){
          $('body').mouseup();
     });
}

编辑2:

终于找到了解决办法

代码如下：

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

---

感谢他的帮助

在这里工作得很好。你使用哪种浏览器？在Firefox中工作，在chromeIs中不工作是你的真实生活（不是小提琴）也在iframe中编写代码？那么我们如何在chrome中实现相同的行为呢？我们将对此进行调查并让你知道：）为你的遏制问题添加了答案。使用遏制体仍然不会在chrome中的iframe之外发送事件尽管这是一个很好的主意，我认为这会在每次拖动时设置mouseleave事件。添加了一种方法，可以借助计时器使拖动“不那么紧张”。好的，我之所以在拖动中编写该函数，是因为我不希望每次用户不拖动时都触发该事件。我认为用户在Iframe中移动鼠标的时间比他拖动元素的时间要长。你怎么说？只有当鼠标离开iframe时才会触发事件。每次拖动可能会触发数百次拖动事件。为了使事情尽可能干净，您可以在拖动时将mouseleave事件添加到主体中。开始并在拖动时将其删除。停止。我认为在每次拖动时添加和删除事件将比触发简单事件花费更多的处理时间。

start: function(){
     $('body').one("mouseleave", function(){
          $('body').mouseup();
     });
}

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