Question

我正在使用jQuery UI可拖动模块，我想做一件简单的事情，但我找不到任何使用谷歌的帮助（也许我搜错了）。这是我的代码：

 $("#table").draggable({
     axis: "x",
     drag: function() {
         if(parseInt($(this).css("left")) <= 0)
         {
             return false;
         }   
     }   
 });

你可以，除了我想阻止可拖动元素达到CSS左值低于0.但是这个代码不起作用 - 如果我拖动元素超出CSS左边它阻止。你可以帮帮我吗？

更新

@VisioN感谢您的帮助。现在一切都按我的意愿运作。这是我的最终代码。也许它有助于sonmeone：

var table_dim = [1898, 1024];
width = Math.round((table_dim[0]/table_dim[1])*$(window).height());
height = $(window).height();
$(document.createElement("img"))
    .attr("src", "images/table.png")
    .attr("height", height)
    .attr("width", width)
    .attr("id", "table")
    .css(
        {"display": "block",
         "position": "absolute",
         "left" : -((width-$(window).width())/2)+"px",
         "z-index": "-9999"
    })  
    .appendTo("body");


$("#table").draggable({
    axis: "x",
    drag: function(event, ui) {
        if (ui.offset.left < $(window).width()-width) {
            $(this).data('draggable').position.left = $(window).width()-width;
        } else if(ui.offset.left > 0)
        {   
            $(this).data('draggable').position.left = 0;
        }   
    }   
});

Answer 1

如何使用containment选项呢？

$("#table").draggable({
    axis: "x",
    containment: "document"
});

作为遏制价值，您可以使用'parent'，'document'，'window'或[x1, y1, x2, y2]。

DEMO： http://jsfiddle.net/bAffp/

UPDATE。另一个选项是在拖动时更正内部值。

$("#table").draggable({
    axis: "x",
    drag: function(event, ui) {
        if (ui.offset.left < 0) {
            $(this).data('draggable').position.left = 0;
        }
    }
});

DEMO： http://jsfiddle.net/bAffp/3/

Answer 2

试试此代码

$（ “＃拖动”）。可拖动（{

限制：{顶部：50，左：100，底部：200，右：200}

}）;

链接

http://jsfiddle.net/bAffp/2/

jQuery UI可拖动限制

2 个答案: