Question

点击某些文字时，我有一个div-pop-up。我希望它可以移动，所以我使用了jQuery UI draggable()功能，就像一个魅力。但是，我遇到的问题是在弹出窗口中有一个div。我正在显示一个数组的信息，如果需要，可以在0到几乎无穷大的范围内。因此我使用overflow:auto将其设置为滚动框。但是，当我单击向上和向下箭头在该框中向上和向下滚动时，它会显示为可拖动的功能。这是相当恼人的，并理解为什么问题发生。我正在寻找建议来解决它或以某种方式解决它。

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

Answer 1

您可以使用handle选项。看一下（我修改了你的小提琴）。在我的例子中，我将标题设置为draggable的句柄，我使用了一些id而不是类。

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

我认为你遇到了这个问题，因为你正在使用相对和绝对定位（这只是猜测，我没有测试过这个）。

Answer 2

就我而言，我更喜欢将我所有的Popup拖到我想要的地方。

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

                $('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>

滚动时jQuery UI拖放问题

2 个答案: