滚动的jQuery UI拖放问题答案

【问题标题】：jQuery UI drag and drop issue with scroll滚动的jQuery UI拖放问题
【发布时间】：2012-07-18 03:27:20
【问题描述】：

当您单击某些文本时，我会弹出一个 div。我希望它是可移动的，所以我使用了 jQuery UI draggable() 功能并像魅力一样工作。但是，我遇到的问题是此弹出窗口中的 div。如果需要，我正在显示范围从 0 到几乎无穷大的数组中的信息。因此，我使用overflow:auto 将其制成滚动框。然而，一切都按原样显示，当我单击向上和向下箭头在该框中上下滚动时，它反而开始了可拖动功能。这很烦人，并理解为什么会发生问题。我正在寻求建议来解决它或以某种方式解决它。

这是一个显示问题的 jsfiddle：http://jsfiddle.net/BnTPG/

【问题讨论】：

可能不容易修复，因为滚动条是浏览器功能。单击向上/向下箭头和空白滚动空间时，它在 Firefox 上正常工作，但当您尝试拖动滚动条时出现故障。现在试试 Chrome 以获得更多乐趣。
我是在 chrome 上设计的，没有在其他浏览器中测试过……我的主要问题是 chrome。我意识到这不是一个容易解决的问题，我也在寻找任何想法以不同的方式做同样的事情。

标签： jquery html jquery-ui

【解决方案1】：

您可以使用句柄选项。看看（我修改了你的小提琴）。在我的示例中，我将标题设置为可拖动对象的句柄，并且像您一样使用了一些 id 而不是类。

http://jsfiddle.net/BnTPG/2/

我认为您遇到此问题是因为您使用的是相对定位和绝对定位（这只是一个猜测，我没有测试过）。

【讨论】：

我确实想过只让标题可点击和拖动，但我仍然希望整个框除了内部滚动 div 之外都是可点击的，但这似乎是目前唯一合乎逻辑的答案，我是将不得不接受它。感谢您的建议和修复，我可能最终会这样做。
我认为这种方法对用户来说更自然，因为他们习惯于使用标题栏而不是对话框体来拖动对话框。我尝试了各种方法来解决这个问题，但没有成功。
感谢您的帮助，是的，我同意，抓住盒子的顶部进行拖动是很自然的。

【解决方案2】：

就我而言，我真的更喜欢将所有弹出窗口拖动到我想要的位置。

如果你想解决你的问题，你必须添加一个 DIV 包装滚动的 div，因为对于 Firefox，我认为滚动条链接到可拖动的父 div，而不是只能滚动的子 div。

                $('body').on("mousedown", ".draggable", function(e) {

                    // Impossible to drag these LIEN, INPUT, TEXTAREA, SELECT
                    var clicked = $(e.target).get(0).tagName;
                    if (clicked == 'A' || clicked == 'INPUT' || clicked == 'TEXTAREA' || clicked == 'SELECT') {
                            return true;
                    }
                    if ($(e.target).parents().hasClass('selectable')) {
                            return true;
                    }

                    // Stop clic action
                    if (e && e.preventDefault) {
                            e.preventDefault();
                    } else {
                            window.event.returnValue = false;
                    }

                    ... etc ...


<div id="debuger" class="draggable" style="overflow: hidden;">
     <div class="selectable">
          <div id="text"> Scrollable text </div>
</div></div>

【讨论】：