Question

I’m dragging a rectangle ‘left_handle’ using Kinetic JS. During the drag I want to also position the left edge of another rectangle ‘box’ on top of it. I’m not getting any errors, so I’m assuming what I’m doing is working, but I think I need to do something to update the canvas or…?

The left_handle rectangle moves as expected, but nothing happens to the box.

    var STAGE_WIDTH = 500;    

    var stage = new Kinetic.Stage({
      container: "container",
      width: STAGE_WIDTH,
      height: 200
    });
    var layer = new Kinetic.Layer();
    var rectX = 80;
    var rectY = stage.getHeight() / 2 - 25;

    var box = new Kinetic.Rect({
      x: rectX,
      y: rectY,
      width: 100,
      height: 50,
      fill: "#00D2FF",
      stroke: "black",
      strokeWidth: 4
    });

    var handle_left = new Kinetic.Rect({
        x: rectX,
        y: rectY,
        height: 50,
        width: 10,
        fill:'#FFC400',
        stroke:'black',
        strokeWidth:3,
        draggable:true,
        dragConstraint:'horizontal',
        dragBounds: {
            left: 10, right: STAGE_WIDTH - 20
        }
    });    

    // - - - - - - - this is the bit that doesn't work - - - - - 
    handle_left.on('dragmove', function(evt) {
      box.setX(handle_left.x);
      layer.draw();
    });
    // - - - - - - - - - - - - 

    layer.add(box);
    layer.add(handle_left);
    stage.add(layer);

​

Answer 1

you were close, try this:

box.setX(handle_left.getX());

For reference: http://jsfiddle.net/jHCRm/