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

Question

我在容器中有一个背景图像，其宽度与背景图像相同。我为容器设置了可拖动功能..我希望限制拖动功能，所有边都是20px ..

MY FIDDLE

  

脚本

$('#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的父...

父级（可拖动的所有方面都大20px） 要拖动的子div，设置

遏制：＆＃34;父母＆＃34; 它会对你有用.. 检查jsFiddle

我已经更新了你的jquery part ..

    containment: "parent",

并设置父 div id = contains 的高度和宽度比可拖动的子项大一些。

现在你只能在父div边界中拖动..