javascript - 可拖动属性和多个监视器

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