7

jQueryDraggableの使用

ドラッグ可能なものを一方向にのみドラッグするように制限するにはどうすればよいですか？
つまり、上のみまたは下のみの場合axis: 'y'
、および左のみまたは右のみの場合axis: 'x'

(with axis set to 'y')これは、ドラッグ可能なものをにのみドラッグしたい場合bottom、それを上にドラッグできないようにする必要があることを意味します。つまり、上にドラッグしようとしたときにその場所に留まる必要があります。

これは私が試したものですが、機能していません。つまり、ドラッグ可能はまだ上方向にドラッグされています

$('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       // if dragged towards top
       if (distance > 0) { 
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});
4

2 に答える 2

6

他の人を助けるために私自身の質問に答える（上記の答えに加えて他の選択肢）

特定のケースを取り上げると、軸が「y」の場合に下向きにのみドラッグを許可するとします。

<div class="draggable">draggable only downwards</div>

css

.draggable {
    position:absolute;
    top:0px;
    background:pink;
    height:100px;
    width:100%;
    left: 0px;
    text-align:center;
}

脚本

$('.draggable').draggable({
    axis: "y"
});    

$('.draggable').on('mousedown', function() {
    var x1 = x2 = $(".draggable").position().left;
    var y1 = $(".draggable").position().top;
    var y2 = ($(window).height() + $(".draggable").position().top);
    $(".draggable").draggable('option', 'containment', [x1, y1, x2, y2]);
});

デモリンク

于 2013-05-14T06:15:14.173 に答える
2

方法1-リバートハックを使用

jsFiddle

 $('.draggable').draggable({
     axis: "y",
     start: function (event, ui) {
         start = ui.position.top;
     },
     stop: function (event, ui) {
         stop = ui.position.top;

         if (start > stop) {
             $('.draggable').css({top: ui.originalPosition.top + 'px'});
         }
     }
 });

方法2-元に戻さずにドラッグを無効にする

jsFiddle 2

基本的に、方法2は、ドラッグ可能な要素をコンテナ内に拘束し、ドラッグ可能な要素とともにコンテナを移動するだけです。見てください、その驚くほどシンプルですが、効果的です。

$('.draggable').draggable({
    axis: "y",
    containment: "#containment-wrapper",
    scroll: true,
    scrollSensitivity: 100,
    scrollSpeed: 25,
    cursor: '-moz-grabbing'
});
$('.draggable').mousemove(function () {
    var x = $('.draggable').css('top');
    $("#containment-wrapper").css({
        top: x
    });
});

方法3 ドラッグ機能を使用するだけで、方法2と同じ効果が得られます。

jsFiddle 3

$('.draggableDown').draggable({
    axis: "y",
    containment: "#containment-wrapperDown",
    scroll: true,
    scrollSensitivity: 100,
    scrollSpeed: 25,
    cursor: '-moz-grabbing',
    drag: function () {
        var x = $('.draggableDown').position().top;
        $("#containment-wrapperDown").css({
            top: x
        });
    }
});
于 2013-05-11T05:01:47.327 に答える