0

私はjQuery UIのドラッグ可能なモジュールを使用しています.1つの簡単なことをしたいのですが、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/

アップデート。もう 1 つのオプションは、ドラッグ中に内部値を修正することです。

$("#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

このコードを試してください

$("#ドラッグ可能").ドラッグ可能({

制限: {上: 50、左: 100、下: 200、右: 200}

});

リンクは

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

于 2012-05-10T11:05:11.977 に答える