jQuery UI 可拖动但有限制

Posted 2023-05-08

技术标签:

【中文标题】jQuery UI 可拖动但有限制【英文标题】：jQuery UI draggable with limitations 【发布时间】：2012-07-28 06:29:00 【问题描述】：

我正在尝试使用 jquery ui 创建可拖动滑动门的效果。 html 是：

<div id ="home-elev-door" class="elev-door-wrap">           
        <div class="elev-door"></div>
</div>

我目前的代码是这样的：

var elevWrap = $('.elev-door-wrap')

$(function() 
    $( ".elev-door" ).draggable(
        cursor: 'pointer',
        axis: 'x',
        drag : function(event, ui)  ui.position.left = onDragElev(ui.position.left); ,
        );
);

function onDragElev(left)
    if ( left > 0 )  left = 0; 
    else if ( (elevWrap.width()+left) < 27 )  left = 27-elevWrap.width(); 
    return left;

这基本上是使我能够向左和向后滑动门，并设置 27px 的限制，以限制它在父 div 内的可拖动距离。但是，我想要做的是扭转这一点，以便限制仅在右侧。我尝试将“左”的所有实例更改为“右”，但这似乎不起作用。相反，它会直接从两侧拖出父 div。

对此的任何帮助将不胜感激。非常感谢。

更新：我有一个 js fiddle 链接来帮助说明我的意思。希望它有所帮助。 http://jsfiddle.net/metallikat79/RCGDH/

【问题讨论】：

【参考方案1】：

猜出来了。只需要一行代码进行包含并传递一组坐标作为限制，即；