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

时间:2014-03-02 10:46:56

标签: jquery css jquery-ui-draggable

我在容器中有一个背景图像,其宽度与背景图像相同。我为容器设置了可拖动功能..我希望限制拖动功能,所有边都是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);

  }
});

Initial state when background and container are each other State when background image is shifted/dragged i want to limit the drag same distance in all the sides limit after this same distance in all the sides

1 个答案:

答案 0 :(得分:1)

你可以做什么..创建你想要拖动的div的父...

父级(可拖动的所有方面都大20px) 要拖动的子div,设置

遏制:"父母" 它会对你有用.. 检查jsFiddle

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

    containment: "parent",

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

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