title: KineticJS layer index when dragging
body: <p>So my problem seems to be that a draggable object always is drawn over other objects. </p>
  
  <p>Check out my <a href="http://jsfiddle.net/andrewgable/nYHrg/" rel="nofollow"><strong>fiddle</strong></a>.</p>
  
  <p>and my <strong>code</strong>:</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              body {
                  margin: 0px;
                  padding: 0px;
              }
              canvas {
                  border: 1px solid #9C9898;
              }
          &lt;/style&gt;
          &lt;script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta.js"&gt;&lt;/script&gt;
          &lt;script&gt;
           window.onload = function() {
  
              var stage = new Kinetic.Stage({
              container: 'container',
              width: 578,
              height: 200
              });
  
              var cableLayer = new Kinetic.Layer();
  
  
  // build cable
  var cable = new Kinetic.Line({
    strokeWidth: 40,
    stroke: 'green',
    points: [{
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2
    }, {
      x: 100,
      y: 100
    }],
    draggable: true
  });
  
  // build center
  
  var c1 = new Kinetic.Circle({
    radius: 60,
    fill: 'black',
    draggable: true,
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2
  });
  
  
  
  var c2 = new Kinetic.Circle({
    x: 100,
    y: 100,
    radius: 60,
    fill: 'black',
    draggable: true,
  });
  
  //add everything to the layer
  
  
  cableLayer.add(cable);
  cableLayer.add(c1);
  cableLayer.add(c2);
  
  
  
  
  //add all to stage
  stage.add(cableLayer);
  
  
  
  //What to do when something is changed...
  
  cable.on('dragmove', (function () {
    c1.setPosition([cable.getPosition().x + cable.getPoints()[0].x, cable.getPosition().y + cable.getPoints()[0].y]);
    c2.setPosition([cable.getPosition().x + cable.getPoints()[1].x, cable.getPosition().y + cable.getPoints()[1].y]);  
  
    cableLayer.draw();
  
  }));
  
  c1.on('dragstart', (function () {
    c1.getLayer().afterDraw(function () {
      cable.attrs.points[0].x = c1.getX()-cable.getX();
      cable.attrs.points[0].y = c1.getY()-cable.getY();
      cableLayer.draw();
  
    });
  }));
  
  c2.on('dragstart', (function () {
    c2.getLayer().afterDraw(function () {
      cable.attrs.points[1].x = c2.getX()-cable.getX();
      cable.attrs.points[1].y = c2.getY()-cable.getY();
      cableLayer.draw();
    });
  }));
  
  
  }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onmousedown="return false;"&gt;
          &lt;div id="container"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, I tried to set the index using</p>
  
  <pre><code> cable.on('dragmove', (function () {
    c1.setPosition([cable.getPosition().x + cable.getPoints()[0].x, cable.getPosition().y + cable.getPoints()[0].y]);
    c2.setPosition([cable.getPosition().x + cable.getPoints()[1].x, cable.getPosition().y + cable.getPoints()[1].y]);  
     c2.setIndex(1);
    c1.setIndex(1);
    cable.setIndex(2);
    cableLayer.draw();
  
  }));
  </code></pre>
  
  <p>Doesn't seem to work? Why is this? How do I get the circles to draw over the line in all cases? Mainly the case that you drag the line.</p>
  
  <p>Is there somewhere I'm setting this differently somewhere else?</p>
  
  <p>Thanks for your help</p>