Draggable attribute and multiple monitors

Question

I have my own custom popup window in my framework that is draggable using the draggable attribute.

Problem is, on multiple displays you can drag my window completely off the browser's screen and potentially break my web application (if the custom window is modal for example).

How can I stop the default draggable attribute from being dragged off onto another screen?

Answer 1

The .draggable() function in JQuery UI has an option for containment

Here's an example of its usage

JSFiddle

HTML

<div id="container">
    <div class="child-container">
        <div class="draggable" id="d1">I'm stuck inside my parent</div>
        <div class="draggable" id="d2">I'm stuck inside the outer container</div>
    </div>
    <div class="draggable" id="d3">I'm stuck inside the document</div>
    <div class="draggable" id="d4">I can go anywhere!</div>
</div>

CSS

div {
    border-width: 2px;
    border-style: solid;
    margin: 2px;
    padding: 2px;
    background-color: #fff;
}
#container {
    margin: 20px;
    border-color: lime;
    height: 300px;
}
.child-container {
    border-color: red;
    width: 50%;
    float: right;
    height: 250px;
}
.draggable {
    width: 100px;
    height: 100px;
    border-color: blue;
}

JQuery

// Make draggable
$('.draggable').draggable();

// Add containment for each item
$('#d1').draggable('option', 'containment', 'parent');
$('#d2').draggable('option', 'containment', '#container');
$('#d3').draggable('option', 'containment', 'document');
$('#d4').draggable('option', 'containment', 'window');