jQuery拖放 - 防止拖动到左侧？

Question

我有一个jQuery draggable元素，它应该允许自己向上，向下或向右拖动，但不能离开。

我有什么方法可以做到这一点吗？

我意识到可以使用revert，在拖动之后检查其位置，并将其恢复到起始位置;但是，我想从一开始就禁用left-direciton。

这是我目前的代码：

            $(elem).draggable({
                cursor: "move",
                scroll: false,
                addClasses: true,
                start: function(e, ui) {
                    //I can calculate the starting position here
                },
                stop: function(e, ui) {
                    //some stuff happens here, not relevant
                }
            });

我的想法是获得起始位置，然后在拖动动态进行时以某种方式检查位置，将其与起始位置进行比较，以及当前是否.left

这可能吗？

如果没有，那么我想我必须在代码的stop部分内执行检查，然后从那里恢复原来的位置。

请注意，我无法更改父级容器的大小/位置，即全屏。此外，如果我将可拖动元素向右移动并放下它，我仍然无法将其从新位置向左拖动。

Answer 1

如何在drag函数中执行此操作的简单示例：

https://jsfiddle.net/Twisty/ysuh8wgq/

<强>的JavaScript

$(function() {
  var elem = "#div1";
  var myStart;
  $(elem).draggable({
    containment: "parent",
    cursor: "move",
    scroll: false,
    addClasses: true,
    start: function(e, ui) {
      myStart = ui.position;
    },
    drag: function(e, ui) {
      if (ui.position.left < myStart.left) {
        return false;
      }
    },
    stop: function(e, ui) {
      //some stuff happens here, not relevant
    }
  });
});

你也可以这样做：

https://jsfiddle.net/Twisty/ysuh8wgq/2/

drag: function(e, ui) {
  if (ui.position.left < myStart.left) {
    ui.position.left = myStart.left;
  }
}

这将允许用户继续移动项目，但不能再推过该左侧值。