可拖动属性和多个监视器

Question

我的框架中有自己的自定义弹出窗口，可以使用draggable属性进行拖动。

问题是，在多个显示器上，你可以将我的窗口完全从浏览器的屏幕上拖下来，并可能破坏我的web应用程序（例如，如果自定义窗口是模态的）。

如何阻止将默认的可拖动属性拖到另一个屏幕上？

Answer 1

JQuery UI中的.draggable()函数具有containment 选项

这里有一个使用的例子

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');