使用滚动时的jQuery UI拖放问题

Question

当你点击某些文本时，我有一个div弹出窗口。我希望它是可移动的，所以我使用了jQuery UI的draggable()功能，工作起来非常棒。但是，我遇到的问题是弹出窗口中的div。如果需要，我将显示一个数组中的信息，该数组的范围可以从0到几乎无穷大。因此，我使用overflow:auto将其转换为滚动框。但是，当我单击向上和向下箭头在该框中上下滚动时，它将开始可拖动功能。这是相当恼人的，并且理解为什么会发生这个问题。我正在寻找解决它的建议或以某种方式绕过它。

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

Answer 1

您可以使用handle选项。看一下(我修改了你的小提琴)。在我的示例中，我将title设置为draggable的句柄，并使用了一些ids，而不是像您所做的那样使用类。

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

我认为你有这个问题是因为你使用了相对和绝对定位(这只是一个猜测，我没有测试过这个)。

Answer 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>