title: What are getClientRect(); method and layer.children.each do in JavaScript?
body: <p>How does the getClientRect(); method work in this code? Is that mean to get the sides of the rectangle?
  Also, what is layer.children.each in the code below? Is that mean selecting each child of the node? Can anyone explain to me how these methods work? I checked the document but still not getting how they work.</p>
  <p>Thank you so much for your help! I was able to solve this problem.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var stage = new Konva.Stage({
    width: 400,
    height: 200,
    container: 'container'
  });
  var layer = new Konva.Layer();
  stage.add(layer);
  
  layer.on('dragmove', function(e) {
    var target = e.target;
    var targetRect = e.target.getClientRect();
    layer.children.each(function(obj) {
      if (obj === target) {
        return;
      }
      if (haveIntersection(obj.getClientRect(), targetRect)) {
        alert("Intersection")
      }    
    });
  });
  
  function haveIntersection(r1, r2) {
    return !(
      r2.x &gt; r1.x + r1.width/2 ||
      r2.x + r2.width/2 &lt; r1.x ||
      r2.y &gt; r1.y + r1.height/2 ||
      r2.y + r2.height/2 &lt; r1.y
    );
  }
  
  // This will draw the image on the canvas.
  function drawImage(source, konvaImage) {
    layer.add(konvaImage);
    var image = new Image();
    image.src = source;
    image.onload = function() {
      konvaImage.image(image);
      layer.draw();
    }
  }
  
  
  //1yen
  var ichiYenImg = new Konva.Image({
    x: 20,
    y: 20,
    width: 100,
    height: 100,
    draggable: true
  });
  var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
  drawImage(sourceImg1, ichiYenImg);
  
  
  var goYenImg = new Konva.Image({
    x: 120,
    y: 20,
    width: 100,
    height: 100,
    draggable: true
  });
  var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
  drawImage(sourceImg2, goYenImg);
  
  //piggy bank 1yen
  var ichiYenpiggyImg = new Konva.Image({
    x: 300,
    y: 100,
    width: 100,
    height: 100,
    draggable: false
  });
  var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
  drawImage(sourceImg7, ichiYenpiggyImg);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;script src="https://unpkg.com/konva@4.0.5/konva.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="stage-parent"&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>