JQuery在父級之外拖動

我正在使用JQuery的draggable（）;使li元素可拖動。唯一的問題是當元素被拖到父元素之外時，它不會顯示出來。也就是說，它並沒有離開其父母的界限。一個例子是：http://imgur.com/N2N1L.png - 就好像其他所有的z-index具有更高的優先級（並且元素在所有內容下滑動）。JQuery在父級之外拖動

下面的代碼：

$('.photoList li').draggable({ 
     distance: 20, 
     snap: theVoteBar, 
     revert: true, 
     containment: 'document' 
    });

與Li的元素放入的DIV像這樣：

<div class="coda-slider preload" id="coda-slider-1"> 
    <div class="panel"> 
     <div class="panel-wrapper"> 
      <h2 class="title" style="display:none;">Page 1</h2> 
      <ul class="photoList"> 
       <li> 
        <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" /> 
       </li> 
      </ul> 
     </div> 
    </div>

我敢肯定的問題是，它不會離開它的父容器，但我不知道該如何解決問題。

任何方向或幫助，將不勝感激偉大！

來源

2010-04-16 Andy

這看起來像一個CSS問題。嘗試關閉恢復功能，以便在將其拖動到半可見位置時保持放置狀態。然後在Firebug中玩Z指數等，看看你能不能展示它。這可能是一個CSS的問題與父母的UL或DIV的'溢出：隱藏'。

來源

2010-04-17 13:40:09

我也有類似的問題，並通過設置選項解決它：

appendTo: 'body'

唯一的副作用是如果你有應用到基於它的產品風格父容器，這些樣式不會出現在幫手上。

來源

2011-02-15 15:54:11

我登陸這個頁面的時候遇到了同樣的問題，Brendan的回答讓我很接近。設置appendTo選項沒有幫助，但我能夠通過將overflow: visible添加到可拖動元素的父級來解決我的問題。事實證明，我是在繼續隱藏在鏈條上的某處。

請注意，它看起來像這樣工作，因爲jQuery UI通過動態設置相對於父級的位置來移動可拖動元素 - 這對我來說是新的英特爾！

來源

2011-06-01 16:19:11

非常感謝它爲我工作:) – 2013-09-09 10:32:27

來到這裏尋找解決方案... curiously appendTo爲我工作！ – 2017-06-07 14:37:07

你可以請張貼一些示例代碼是jsfiddle等的鏈接？ – 2018-01-22 04:56:55

我也有同樣的問題。
您可以使用此選項

遏制：$（ '＃divmain'）
幫手： '克隆' 分別

爲
- 定義了限制區域下探動作
- 可見節目拖動的對象也在div div之外但在#divmain之內

示例

<div id="divmain"> 
    <div id="divparentdraggable"> 
    <div id="divdraggable"></div> 
    </div> 
    <div id="divparentdroppable"> 
    <div id="divdroppable"></div> 
    </div> 
</div>

jQuery代碼：

$('divparentdraggable').draggable({ 
... 
containment: $('#divmain'), 
helper: 'clone', 
... 
});

我希望幫助別人。

來源

2013-01-31 19:47:22 rfellons

男人，你救了我的一天！謝謝。 – Oleg 2013-02-02 16:26:41

幫手：'clone'選項非常有用，因爲我有一個必須保留overflow：scroll;的ul。謝謝！ – ljs 2013-03-07 15:12:56

謝謝@fellons – BoundForGlory 2015-09-09 15:36:43

看起來像上面的一些組合爲我做了。

設置appendTo: 'body'和helper: 'clone'。這種方式將創建一個新的DOM對象作爲身體的子體，隨處可見。這樣，您可以拖放（並放置）到任何地方。

來源

2014-09-26 12:54:10 Koschi

非常謝謝你koshi：P – Sudarshan 2015-06-12 08:59:36

JQuery在父級之外拖動

回答

相關問題