限制仅向一个方向拖动

Posted

技术标签:

【中文标题】限制仅向一个方向拖动【英文标题】:Restrict drag only in one direction 【发布时间】:2013-03-14 15:17:45 【问题描述】:

使用jQuery Draggable

如何限制一个可拖动对象只能在一个方向上拖动? 即axis: 'y'时只有顶部或底部 当axis: 'x'时,要么只在左边,要么只在右边

这意味着,如果我希望将可拖动的 (with axis set to 'y') 仅拖动到 bottom,那么它不应该能够将其拖动到顶部,即当尝试向顶部拖动时它应该保持在原位

这是我尝试过但不起作用的方法,即 draggable 仍在向上拖动

$('. 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');
       
   
);

【问题讨论】:

你想明白了吗?我正在尝试做类似的事情jsFiddle 您的个人资料中缺少印度的“我” :) 【参考方案1】:

回答我自己的问题(除了上述答案之外的其他选择)以帮助他人

举一个具体的例子说只允许在axis:'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]);
);

Demo Link

【讨论】:

只是一个小提示:您可以使用 $(this) 而不是重复 $('.draggable'),或者将对象存储在变量中。谢谢乌塔拉。【参考方案2】:

方法 1 - 使用 Revert Hack

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

方法三 效果和方法二一样,只是使用了拖拽功能。

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

【讨论】:

你什至不能拖动。你所做的可以通过添加'revert:true'来实现 @Uttara 我仍在努力,revert:true 在我的情况下不起作用,可拖动元素正在从屏幕边缘恢复。 @Uttara 有条件地添加revert:true 似乎有问题-jsFiddle @Uttara 我想我终于有了一个可靠的解决方案,看看吧。 感谢您的努力 :)。很久以前就已经找到了解决方案,但没有时间将其发布为答案。

以上是关于限制仅向一个方向拖动的主要内容,如果未能解决你的问题,请参考以下文章

PyQtGraph,仅向一个方向滚动图形

如何将可拖动的 UIView 限制在特定范围内

如何限制 <textarea> 的可拖动宽度

将 Google Maps V3 标记的拖动限制到折线

限制各个容器 div 中多个 div 的拖动 - jquery draggable

限制 jQuery 可拖动项与兄弟元素重叠/碰撞