2

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

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

4

2 回答 2

0

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

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

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

于 2012-07-18T03:46:10.163 回答
0

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

如果你想解决你的问题，你必须添加一个 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>
于 2013-09-11T15:34:54.613 回答