带有位置条件的 jQuery 可拖动答案

【问题标题】：jQuery draggable with position conditionals带有位置条件的 jQuery 可拖动
【发布时间】：2017-03-30 20:24:23
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery jquery-ui draggable

【解决方案1】：

你可以使用stop事件：

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

    }

第一部分是这样的：

Fiddle

【讨论】：

【解决方案2】：

实现你的第一个目标

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

您只需在第一个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

【讨论】：