滚动jQuery UI拖放问题

当您单击某些文本时，我有一个div弹出窗口。我希望它是可移动的，所以我使用jQuery UI draggable()功能，并像魅力一样工作。但是，我遇到的问题是在这个弹出窗口中的div。如果需要，我显示的数组范围从0到几乎无穷大。因此我使用overflow:auto将它变成滚动框。一切都会像它应该显示的那样，当我点击向上和向下箭头在该框内上下滚动时，它将启动可拖动功能。这是相当烦人的，并明白为什么这个问题正在发生。我正在寻找建议来解决它或以某种方式绕过它。滚动jQuery UI拖放问题

这里是显示问题上的jsfiddle：http://jsfiddle.net/BnTPG/

来源

2012-07-18 Skovy

可能不容易修复，因为滚动条是浏览器功能。在单击向上/向下箭头和空白滚动空间时，它可以在Firefox上正常工作，但当您尝试拖动滚动条时会出现毛刺。现在尝试在Chrome上获得更多乐趣。 – 2012-07-18 03:33:29

我在Chrome上设计它，并没有在其他浏览器中测试...我的主要问题是在铬。我意识到这不是一个简单的解决方案，我也在寻找任何想法以不同的方式做同样的事情。 – Skovy 2012-07-18 03:35:18

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

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

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

来源

2012-07-18 03:46:10 davidbuzatto

我确实想过只能制作可点击和可拖动的标题，但我仍然希望整个盒子可以点击而不是内部滚动div，但这似乎是此时唯一合乎逻辑的答案，我将不得不使用它。感谢您的建议和修复，我可能会最终与此一起去。 – Skovy 2012-07-18 03:51:35

我认为这种方法对用户来说更自然，因为它们用于使用标题栏而不是对话框主体来拖动对话框。我尝试了各种尝试来解决这个问题，但没有成功。 – davidbuzatto 2012-07-18 04:05:51

我很感激帮助，是的，我同意，抓住盒子的顶部拖动是非常自然的。 – Skovy 2012-07-18 04:15:49

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

如果你想解决你的问题，你必须添加一个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-11 15:34:54 Fabien

滚动jQuery UI拖放问题

回答

相关问题