Cancel a draggable 'dragmove' on kineticjs?

Question

I have to set a limit for the movement of a circle when the coordinate 'y' is on the pixel 'y-15', on a specific coordinate (x,y). I've tried to use 'draggable=true' with the event 'mouseup' and 'mousedown', but I can't get the results that I need. Can someone help me, please?

My code is:

circle.on('mouseover',function(){
    this.setAttr('draggable',true);
  });

  circle.on('dragmove',function(e){

    var mousePos = stage.getMousePosition();
    var x = mousePos.x;
    var y = mousePos.y;

    if(y < y2- 15){

      //do anything
    }
    else{
      this.setAttr('draggable',false);
    }

  });

Answer 1

If I understand correctly, what you want is dragBoundFunc.

See this tutorial:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/

    // bound below y=50
    var blueGroup = new Kinetic.Group({
      x: 100,
      y: 70,
      draggable: true,
      dragBoundFunc: function(pos) {
        var newY = pos.y < 50 ? 50 : pos.y;
        return {
          x: pos.x,
          y: newY
        };
      }
    });

You'll just have to modify your code to look for y-15 when you grab your mouse coordinates, and set the dragBoundFunc to reflect the coordinates you clicked on.

If you're trying to limit the y-axis on a known fixed y value, then this becomes even easier, exactly like how the tutorial shows you, except you just have to change the coordinate that you want to limit Y to.

Check this one as a quick reference too:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-shapes-horizontally-or-vertically-tutorial/