2

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

这是一个可以玩的小提琴。只需在输出区域外拖动并释放光标，您就会明白我在说什么。

我想了两种方法

  1. 在拖动时将鼠标移动限制到包含区域（我搜索了它但没有找到如何操作。也许那不可能？）

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

有什么方法或更聪明的想法来实现这一目标？？？

Relevant Code（对于堆栈溢出）

4

2 回答 2

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 文档的范围。

于 2013-02-01T11:52:33.930 回答
0

好的，我找到了解决方法。适用于 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的帮助

于 2013-02-01T13:31:00.653 回答