CODEWITHSUNDEEP
jqueryjquery-ui
Joshua Bakker
Joshua Bakker

Reputation: 2348

jquery draggable containment not working correctly

I recently made a new function to create draggable dialogs and keeping them in the content DIV of the CMS. The selector would be: #CMS_content #content. I use this as my draggable function:

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

This works as expected: the dialog doesn't go out of the screen. The dialog is custom made and not any dialog of jQueryUI.

However, if I use the selector (see code below) to keep it in the content ID, whenever I drag the window it goes out of the screen on the top. So I drag the dialog, it 'disappears', but when I open firebug, it's just placed outside the window.

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

Any ideas why it doesn't work? I think it's a way better idea to keep it in the content rather than making it draggable over the side menu and top header.

This is the HTML of the dialog:

<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>

The HTML is added to #CMS_content #content, so the full HTML would be:

<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>

Upvotes: 0

Views: 2614

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Along with the CSS you specified in comments, if you add height and width to your #content then you can actually see the element inside the container while dragging with the same js you have.

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

DEMO

Upvotes: 3

Related Questions