jQuery 可拖动位置条件

Question

试图弄清楚只有在蓝色方块被拖动到其父方的另一端之后才能拖动红色方块。

还想知道是否有可能(在单独的场景中(在拖动蓝色方块时让红色方块镜像蓝色方块。

https://jsfiddle.net/t167y2ga/14/

$(function() {
  $("#draggable_left").draggable({
    containment: "parent",
  });
});
$(function() {
  $("#draggable_right").draggable({
    containment: "parent",
  });
});

Answer 1

您可以使用stop事件：

stop:function(ev,ui){
        if(ui.position.left === 150) {
            $("#draggable_right").draggable({
            containment: "parent",
          });
    }

像这样的东西将完成第一部分：

小提琴

Answer 2

实现您的第一个目标

只有在蓝色方块之后才能拖动红色方块 拖动到其父级的另一端

您只需要在从第一个 draggable 元素触发 stop 事件后将draggable应用于 html 元素。示例代码为：

$(function() {
  $("#draggable_left").draggable({
    containment: "parent",
    stop: function(e, ui) {
      $("#draggable_right").draggable({
        containment: "parent",
      });
    },
  });
});

在此处查看 JSFiddle 工作示例

编辑：如果您想在蓝色元素不在右侧时禁用draggable，请参阅其他JSFiddle