Question

试图找出如何只能在将蓝色方块拖动到其父级的另一端之后才能拖动红色方块。

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

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

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

Answer 1

实现您的第一个目标

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

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

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

请参阅the JSFiddle working example here

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

Answer 2

您可以使用stop事件：

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

    }

这样的事情会做第一部分：

Fiddle

jQuery可以使用位置条件

2 个答案: