Search code examples
javascriptjqueryjquery-uidraggable

jQuery draggable with position conditionals

Trying to figure out how to be able to drag the red square ONLY AFTER the blue square has been dragged to the other end of its parent.

Also wondering if it is possible (in a separate scenario) to have the red square mirror the blue square when the blue square is dragged.

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

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

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

  • You can use stop event:

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

    }

    Something like this will do the first part:

    Fiddle