jquery - 如何根据屏幕尺寸限制可拖动的边界限制？

Question

我在容器中有一个与背景图像宽度相同的背景图像..我为容器设置了可拖动功能..我想将拖动功能限制在所有边上 20px..

MY FIDDLE

Script

$('#dragThis').draggable(
    {
        drag: function(event, ui) {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);

  }
});

Answer 1

你能做什么..创建你想拖动的div的父级..

parent(可拖动的所有边大 20px) 要拖动的子 div，设置

containment :"parent" 它会为你工作.. 检查一下jsFiddle

因为我已经更新了你的 jquery 部分..

    containment: "parent",

并设置父级 div id=contain 的高度和宽度略大于可拖动的子级。

现在您只能在父 div 边界内拖动..