滾動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拖放問題

回答

相關問題