Jquery拖延问题

基本上我想要的是，在拖动时，如果我走到收容区域外并释放鼠标，那么可拖动元素就会粘到我离开容器区域的边界。 当我将光标移回时，元素会回到光标处。 当你只是移动光标（而不是拖动）并且元素仍然被拖动时，它看起来并不好看。

这是一个小提琴。 只需拖动并将光标释放到输出区域外，您就可以得到我正在谈论的内容。

我在考虑两种方式

1. 在被拖动时限制鼠标移动到包含区域（我搜索它并且没有找到如何做它。这可能不可能？）

2. 如果光标离开容器区域，则将可拖动恢复到其位置。 （还是找不到办法做到这一点）

任何方式或更明亮的想法来实现这一点???

Relevant Code （用于stackoverflow）

Answer 1

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

它看起来像Chrome不允许，但firefox确实如此。

试试这个： 小提琴

 $('body').mouseleave(function() { $(document).trigger("mouseup"); }); 

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

矫枉过正版本（这将允许用户暂时（1秒）离开iframe并返回而不会丢失拖拽）：

 $('body').prop('mouseuptimer',null) .mouseleave(function() { var objTimer = setTimeout(function() { $(document).trigger("mouseup") }, 1000); $(document).prop('mouseuptimer', objTimer); }) .mouseenter(function() { var objTimer = $(document).prop('mouseuptimer'); if (objTimer) clearTimeout(objTimer); }); $(function() { $( "#sortable" ).sortable({revert: true }); $( "#draggable" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "ul, li" ).disableSelection(); }); 

编辑：

回答你的第一个问题：

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

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

但是这只能将拖动的元素包含在边界框中（在本例中为“文档”，但它也可以是“父”或“#somediv”）。 鼠标光标仍然可以移动到iframe之外的任何位置，并从那里调度事件，超出iframe文档的范围。

Answer 2

好的，我找到了解决方法。 适用于IE8和Chrome。

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

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

工作小提琴

编辑：感谢Rembunator指出了这个漏洞，我决定使用.one（）来获得更好的性能，并将代码从拖动转移到开始

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

感谢Rembunator的帮助