jQuery的可拖动的问题(Jquery draggable issue)

基本上我想要的是同时拖动，如果我去了围护区域外，然后松开鼠标点击那里，可拖动的元素只是坚持从我离开containement区域的边界。当我回到我的移动光标，元素枝回光标。它没有看起来不错，当你只是移动光标（不拖动）和元素还是会被拖累。

这里是一个小提琴一起玩。只需拖动并释放输出区外的光标，你会得到什么，我说什么。

我想两种方式

限制鼠标移动到containmenet区域而被拖入（我搜索了它，并没有找到如何做到这一点。MAYB那不是可能吗？）
恢复可拖动到它的位置，如果光标离开containement区域。（不过不可能找到一个方法来做到这一点）

任何方式或多个亮点思路来实现这个???

Relevant Code （用于计算器）

Answer 1:

我想这是因为它的iframe中。这就像拖着你的浏览器之外。 MouseUp事件不会在页面注册。

它看起来像铬不允许，但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您指出的缺陷，我决定用。一（）获得更好的性能，以及转移代码拖动启动

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他的帮助

文章来源: Jquery draggable issue