jquery可拖動遏制不能正常工作

我最近做了一個新的功能來創建可拖動的對話框，並將它們保留在CMS的內容DIV中。選擇器將是：#CMS_content＃內容。我用它作爲我的可拖動功能：jquery可拖動遏制不能正常工作

$('#' + id).draggable({ 
    handle: '.title', 
    containment: 'window' 
});

這樣按預期工作：對話框不會出現在屏幕上。該對話框是自定義的，而不是jQueryUI的任何對話框。但是，如果我使用選擇器（請參見下面的代碼）將其保留在內容ID中，那麼每當我拖動窗口時，它就會從頂部的屏幕出去。所以我拖動對話框，它'消失'，但是當我打開螢火蟲時，它只是放在窗戶外面。

$('#' + id).draggable({ 
    handle: '.title', 
    containment: '#CMS_content #content' // <-- not working. 
});

任何想法，爲什麼它不工作？我認爲將內容保留在內容中比在側邊菜單和頂部標題上拖動它更好。

這是對話的HTML：

<div id="draggableDialog" class="dialog onfront"> 
    <div class="title"> 
     This is a title 
     <img src="images/delete_icon.png"> 
    </div> 
    <div class="content"> 
     This is content 
    </div> 
</div>

的HTML被添加到#CMS_content＃內容，所以完整的HTML是：

<body> 
    <div id="CMS_content"> 
     <div id="content"> 
      <div id="draggableDialog" class="dialog onfront"> 
       <div class="title"> 
        This is a title 
        <img src="images/delete_icon.png"> 
       </div> 
       <div class="content"> 
        This is content 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2015-10-06 Joshua Bakker

添加對話框的HTML。 –

請添加呈現的'html'，以便我們創建一個'demo'並盡力解決.. –

我希望這是您的意思。 –

隨着CSS您在指定如果您將height和width添加到您的#content，那麼您實際上可以在容器內看到element，同時用相同的js進行拖動。

#CMS_content #content 
{ 
    height:200px; 
    width:200px; 
    background:yellow; 
}

DEMO

來源

2015-10-06 13:26:19

我從來沒有在#content上的寬度和高度，它以前工作。 CMS_content（765px）和寬度（100％）有一個高度。 –

但請參閱** [此演示]（https://jsfiddle.net/Guruprasad_Rao/ewjg9w0y/2/）**。 ''content'實現了'CSS'加上指定的'height'和'width'作爲'100％'。所以，我認爲很難爲'element'設置'height'和'width' ：絕對' –

我確實使用了一些像素的寬度和高度，現在我仍然可以將它拖出#content。儘管它保留在整個文檔中（與窗口遏制相同） –

jquery可拖動遏制不能正常工作

回答

相關問題