title: how to keep a object in array between other objects in array (canvas slider)
body: <p>I am making a slider with kineticjs where you can can dynamically add more handles to gain more handles. Important is that the handles may not cross over eachother. Because it is important that the order of rank is still te same.</p>
  
  <p>I have made what checks if the object what is higher in order has a lower x value than the object that is one lower in order. If I have made 5 handles, the last one works perfect. If I drop it on the left from the 4th it will put nicely right from the 4th. But if I put the 4th on the left of the 3th it will just go there and the 5th will be put close right to the 3th instead that the 4th does that.</p>
  
  <p>How can it happen? Is there a solution for this problem?</p>
  
  <pre><code>container.addEventListener('mouseup', function(e) {
   handles = layer.getChildren();
          for(var m=handles.length; m--;)
          {
              if(m&gt;0)
              {
                  if (layer.get('#myRect'+m)[0].getAbsolutePosition().x &lt; layer.get('#myRect'+(m-1))[0].getAbsolutePosition().x)
                  {
                      handles[m].setX(layer.get('#myRect'+(m-1))[0].getAbsolutePosition().x + 15);
                  }
              }
          }
          layer.draw();
          Update();
      }); 
  </code></pre>
  
  <p>I have discovered that the layer.getChildren is quite messy. Each time he gives the objects an other rankorder. The layer.get('#myRect'+(m-1))[0] however is more reliable. I have kept the layer.getChildren for the counting.</p>
  
  <p>EDIT: I came to discover that when you push the layer.getChildren in a selfmade array, it is more reliable while you have still the array options (layer.getChildren is unreliable for rank order). </p>
  
  <p>The problem with my design is that you can have a moment where you have true on both if. Then he does always the if and thats not what you always want. So I have made a function where it calculates if your handle goes to the right or left and then looks if its across another one. Sorry for messy explanation and code.</p>
  
  <pre><code>var latestcoordinate = 0;
  var newcoordinate = 0;
  
   container.addEventListener('mousedown', function(e) {
       latestcoordinate = 0;
  for (var x = 0; x &lt; array.length; x++) {
  
      latestcoordinate += parseInt(array[x].getAbsolutePosition().x);
  }
  
   });
  
  
   container.addEventListener('mouseup', function(e) {
       newcoordinate = 0;
       for (var x2 = 0; x2 &lt; array.length; x2++) {
          newcoordinate += parseInt(array[x2].getAbsolutePosition().x);
      }
  
          for(var m=array.length; m--;)
          {
              if(m&lt;array.length-1 &amp;&amp; newcoordinate &lt; latestcoordinate)
              {
                  if (array[m].getAbsolutePosition().x &lt; array[m+1].getAbsolutePosition().x)
                  {
                      array[m].setX(array[m+1].getAbsolutePosition().x + 15);
                  }
              }
              if(m&gt;0  &amp;&amp; newcoordinate &gt; latestcoordinate)
              {
                  if (array[m].getAbsolutePosition().x &gt; array[m-1].getAbsolutePosition().x)
                  {
                      array[m].setX(array[m-1].getAbsolutePosition().x - 15);
                  }
              }
  
          }
          layer.draw();
          Update();
      }); 
  </code></pre>