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",
          });

    }

Нещо подобно ще направи първата част:

Fiddle

person luk4ward    schedule 30.03.2017

arrow_upward
0
arrow_downward

За да постигнете първата си цел

можете да плъзнете червения квадрат САМО СЛЕД като синият квадрат бъде плъзнат до другия край на неговия родител

Просто трябва да приложите draggable към html елемента, след като стоп събитие бъде задействано от първия draggable елемент. Примерният код е:

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

Вижте работещия пример за JSFiddle тук

РЕДАКТИРАНЕ: В случай, че искате да деактивирате draggable, когато синият елемент не е в дясната страна, вижте това друг JSFiddle

person leo.fcx    schedule 30.03.2017