0

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

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

除了我想阻止可拖动元素达到低于 0 的 CSS 左值之外，你可以这样做。但是这段代码不起作用 - 如果我将元素拖动到 CSS 左值 0 之外，它会阻塞。你可以帮帮我吗？

更新：

@VisioN 感谢您的帮助。现在一切都按我的意愿工作。这是我的最终代码。也许它可以帮助儿子：

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;
        }   
    }   
});
4

2 回答 2

1

改用containment选项怎么样？

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

作为包含值，您可以使用'parent'、或。'document''window'[x1, y1, x2, y2]

演示：http: //jsfiddle.net/bAffp/

更新。另一种选择是在拖动时更正内部值。

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

演示：http: //jsfiddle.net/bAffp/3/

于 2012-05-10T10:43:43.893 回答
-1

试试这个代码

$("#draggable").draggable({

限制：{上：50，左：100，下：200，右：200}

});

链接是

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

于 2012-05-10T11:05:11.977 回答