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

【问题标题】：jQuery drag and drop - prevent dragging to left side?jQuery拖放 - 防止拖动到左侧？
【发布时间】：2017-05-10 09:27:35
【问题描述】：

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

有什么办法可以做到吗？

我意识到可以使用revert，在被拖动后检查它的位置，并将它带回到起始位置；但是，我想从一开始就禁用左向拖动。

这是我当前的代码：

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

我的想法是获取起始位置，然后在动态拖动时以某种方式检查位置，将其与起始位置进行比较，如果 current.left

这可能吗？

如果不是，那我想我必须在代码的stop 部分执行检查，然后从那里恢复到原始位置。

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

【问题讨论】：

可能重复stackoverflow.com/questions/15609776/…
@Mokkun 我不能使用“axis: y”，因为它也会限制向右移动。
这需要在drag 中完成，以检查鼠标的位置或被拖动项目的边缘，并确定它是否与特定值发生冲突。另一种选择是创建一个满足您需求的容器，并设置containment 选项以使用此元素。

标签： javascript jquery jquery-ui

【解决方案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;
  }
}

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

【讨论】：