使用拖动功能的jQuery可拖动约束答案

【问题标题】：Jquery draggable constrain using drag function使用拖动功能的jQuery可拖动约束
【发布时间】：2011-08-29 08:11:54
【问题描述】：

在相当复杂的几何形状中需要使用jQuery可拖动，并且无法预先计算框架。

因此，为了解决这个问题，并没有削减遏制选项。

我一直在考虑拖动功能，检查我的条件并返回 false 以防止拖动。但是，问题是，第一次从拖动函数返回 false 后，拖动过程停止，就像用户释放了鼠标按钮一样。

在不取消拖动过程的情况下防止拖出形状有什么建议吗？

【问题讨论】：

标签： javascript jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

主要技巧是在拖动事件函数中设置 ui 辅助对象的位置。

示例

这里我假设你有一个函数可以根据 X 位置计算 Y 限制。

$(x).draggable({
    drag: function (e, ui) {
        ui.position.top = limitY(ui.position.left);
    }
});

这是我在尝试自己解决类似问题时创建的jsFiddle。

【讨论】：

这是一个更清洁的解决方案

【解决方案2】：

我已经解决了可调整大小的类似问题。我不得不手动设置尺寸。试试这样的：

yourdraggable.bind( 'drag', function() {

  var left = $(this).css('left'),
      top = $(this).css('top'),
      width = $(this).width(), 
      height= $(this).height();

  //determine if dragging should contain or continue

  //if contain 
  $(this).css( { left: containLeft, top: containTop } );

});

你可以分别分析 left 和 top 但你明白了

【讨论】：