JQuery-UI 可拖动锁定到窗口

JQuery-UI Draggable locked to the window

本文关键字：窗口 锁定 拖动 JQuery-UI      更新时间：2023-09-26

我创建了一个非常简单的地图，我希望它是可拖动的。

这是代码：http://jsfiddle.net/AeABp/

它有效，我可以随心所欲地移动地图。但我希望它被锁定在"窗口"上，这样当它被拖拽时永远不会有空白，我希望你明白我的意思。我还查看了jquery-ui的概述，但没有找到我需要的任何内容。

您需要将

移动限制为一组坐标才能使其正常工作。有点搞砸了，但包含根据元素的左上角约束了元素。

$(function() {
    var con = $('#container');
    var cw = con.width( ), ch = con.height( );
    var map = $('#map');
    var mw = map.width( ), mh = map.height( );
    var x1 = -mw + cw, y1 = -mh + ch;
    map.draggable({containment:[x1,y1,0,0]});
});

有一个简单的方法可以做到这一点（如果我理解得很好）：

$('#map').draggable({
    containment: 'window',
    scroll: false
});
相关文章：