jQuery перетаскиваемый с условными позициями

Попытка выяснить, как перетащить красный квадрат ТОЛЬКО ПОСЛЕ того, как синий квадрат был перетащен на другой конец его родителя.

Также интересно, возможно ли (в отдельном сценарии), чтобы красный квадрат отражал синий квадрат при перетаскивании синего квадрата.

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

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

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

javascript jquery draggable jquery-ui
person psychoSam-BushOrMan    schedule 30.03.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать событие stop:

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

    }

Что-то вроде этого сделает первую часть:

Скрипка

person luk4ward    schedule 30.03.2017

arrow_upward
0
arrow_downward

Для достижения первой цели

иметь возможность перетаскивать красный квадрат ТОЛЬКО ПОСЛЕ того, как синий квадрат был перетащен на другой конец его родителя

Вам просто нужно применить draggable к элементу html после запуска события stop. из первого элемента draggable. Пример кода:

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

См. рабочий пример JSFiddle здесь

EDIT: Если вы хотите отключить draggable, когда синий элемент находится не с правой стороны, см. этот другой JSFiddle

person leo.fcx    schedule 30.03.2017