how determine object position in kineticjs

I have this code whereby on click event i redraw a shape. now after having multiple shapes I want to determine their positions on the canvas. I.e. which shape is furthest to the left. here is the code.

<!DOCTYPE html>
<html>
<head>
    <style>
      body {
        margin: 1px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
      <input type="button" id="Draw_rect" value="Click Me!">
    </div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<script>

    window.onload = function() 
    {
    var boxes = new Array(); //This would store the rectangles.
    var boxLength = boxes.length; // this tracks the space in the array to access

    // declare the stage (scene)
    var stage = new Kinetic.Stage
    ({
      container: "container",
      width: 578,
      height: 400
    });

    // declare the shape and layer objects
    var shapesLayer = new Kinetic.Layer();

   // initialise only the shape layer
   stage.add(shapesLayer);

  document.getElementById("Draw_rect").addEventListener("click", function ()
   {
    // create the new box object
        boxes[boxLength] = new Kinetic.Rect({
            x: 100,
            y: 110,
            width: 30,
            height: 30,
            fontSize: 26,
          fontFamily: 'Calibri',
          text: 'fx',
          fill: 'black',
          padding: 10,
            strokeWidth: 2,
            draggable: true
        });
        boxLength = boxes.length; // update the array index

        for( var i = 0; i < boxes.length; i++) // loop through the array ensure everything is added to the shapes layer and that they are all visible
        {
            shapesLayer.add(boxes[i]);
            boxes[i].show();
        }

        // redraw the shape after you have updated its properties
        shapesLayer.draw();

   }, false);

   };

</script>
</body>

Solution

You can listen for dragmove events on each of your boxes and then compare the x-coordinates of each box to determine the leftmost.

Here's example code and a Demo: http://jsfiddle.net/m1erickson/2Lg48/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    $results=$("#results");

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });

    // declare the shape and layer objects
    var shapesLayer = new Kinetic.Layer();
    stage.add(shapesLayer);


    var boxes=[]; //This would store the rectangles.

    // 3 test boxes
    boxes.push(addBox(100,30,"red"));
    boxes.push(addBox(120,60,"green"));
    boxes.push(addBox(140,90,"blue"));


    function addBox(x,y,color){

        // create a new Kinetic.Rect
        var box=new Kinetic.Rect({
            x:x,
            y:y,
            width:20,
            height:20,
            draggable:true,
            fill:color,
            stroke:"black",
            strokeWidth:2,
        });

        // when this box is moved
        // determine which box is leftmost on the stage
        box.on('dragmove',function(){
            // create variables to hold the leftmost position
            var left=1000000;
            var leftmostBoxIndex=-1;
            // loop thru each box and see which one is leftmost
            for(var i=0;i<boxes.length;i++){
                if(boxes[i].x()<left){ 
                    leftmostBoxIndex=i;
                    left=boxes[i].x();
                }
            }
            // report the color & x-coordinate of the leftmost box
            var leftBox=boxes[leftmostBoxIndex];
            $results.text(leftBox.fill()+" box is leftmost at x="+leftBox.x());
        });
        // add this box to the layer, draw the layer
        // & return a reference to the newly created box
        shapesLayer.add(box);
        shapesLayer.draw();
        return(box);
    }


}); // end $(function(){});

</script>       
</head>

<body>
    <h4 id="results">Drag each box.  Leftmost will be calculated.</h4>
    <div id="container"></div>
</body>
</html>