title: How to check and print if box is in a other div?
body: <p>i need this for school project.
  I create page where i can upload images, but it does not matter.
  On this image i can create canvas, when i create first canvas this <code>id = room[1]</code>, when i create secound this <code>id = room[2]</code>
  So i create 2 canvas and i have:</p>
  
  <pre><code>room[1]
  room[2]
  </code></pre>
  
  <p>Okey, and i can drop on my image a icons, i write script to check if this icoin is in the canvas (room).
  Now i need to do, if this icon is in canvas and i click a "print" button i need to see all my rooms and all what is in this room.</p>
  
  <p>Look at the script:</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>initDraw(document.getElementById('canvas'));
  
  $( document ).ready(function() {
      sum = 0; 
   });       
  
  function initDraw(canvas) {
      function setMousePosition(e) {
          var ev = e || window.event; //Moz || IE
          if (ev.pageX) { //Moz
              mouse.x = ev.pageX + window.pageXOffset;
              mouse.y = ev.pageY + window.pageYOffset;
          } else if (ev.clientX) { //IE
              mouse.x = ev.clientX + document.body.scrollLeft;
              mouse.y = ev.clientY + document.body.scrollTop;
          }
      };
  
      var mouse = {
          x: 0,
          y: 0,
          startX: 0,
          startY: 0
      };
      var element = null;
  
      canvas.onmousemove = function (e) {
          setMousePosition(e);
          if (element !== null) {
              element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
              element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
              element.style.left = (mouse.x - mouse.startX &lt; 0) ? mouse.x + 'px' : mouse.startX + 'px';
              element.style.top = (mouse.y - mouse.startY &lt; 0) ? mouse.y + 'px' : mouse.startY + 'px';
          }
      }
  
      canvas.onclick = function (e) {
          if (element !== null) {
              element = null;
              canvas.style.cursor = "default";
          } else {
              mouse.startX = mouse.x;
              mouse.startY = mouse.y;
              element = document.createElement('div');
              element.className = 'rectangle';
              sum = sum + 1;
              element.id = "room[" + sum + "]";
              $('.rectangle').attr('name', 'other_amount');
              element.style.left = mouse.x + 'px';
              element.style.top = mouse.y + 'px';
              canvas.appendChild(element)
              canvas.style.cursor = "crosshair";
          }
      }
  }
  
  document.getElementById('removeall').onclick = function() {
  $('.rectangle').remove();
  sum = 0; 
  }
  
  document.getElementById('removeone').onclick = function() {
  $('.rectangle').last().remove();
  sum = sum - 1;
  if(sum &lt; 0){
   sum = 0;
  }
  }
  
    $( function() {
     $( "#draggable" ).draggable({ containment: "#containment-wrapper", scroll: false });
    } );
  
  
  document.getElementById('checkposition').onclick = function() {
  
      var box = document.getElementById ("box");  
                  var checkBox = box.getBoundingClientRect ();
                  leftBox = checkBox.left;
                  topBox = checkBox.top;
                  rightBox = checkBox.right;
                  bottomBox = checkBox.bottom;
  
                  var room = document.getElementById ("room[1]");  
                  var checkRoom = room.getBoundingClientRect ();
                  leftRoom = checkRoom.left;
                  topRoom = checkRoom.top;
                  rightRoom = checkRoom.right;
                  bottomRoom = checkRoom.bottom;
  
  if(leftBox &gt;= leftRoom &amp;&amp; rightBox &lt;= rightRoom &amp;&amp; topBox &gt;= topRoom &amp;&amp; bottomBox &lt;= bottomRoom){
  alert('Box is in room');
  } else {
  alert('Box IS NOT in room');
  }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.rectangle {
      background: linear-gradient(60deg, rgb(171, 71, 188), rgb(142, 36, 170));
      opacity: 0.35;
      position: fixed;
  }
  
  #canvas {
   width:200px;
      height:100px;
      display: block;
  }
  
  #draggable {
   width: auto;
   display: table-cell;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'&gt;
  &lt;div id="canvas" class="snap" style="border: 2px solid red"&gt;&lt;/div&gt;
  &lt;a id="removeall"&gt;Delete all rooms&lt;/a&gt;
  &lt;a id="removeone"&gt;Delete last room&lt;/a&gt;
   &lt;a id="checkposition"&gt;Check if box is in room&lt;/a&gt;
    &lt;div id="draggable"&gt;
  &lt;i class="material-icons" id="box" style="font-size: 25px;"&gt;print&lt;/i&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now i want new button "Done" and this button must print all items in rooms, and all rooms, example:</p>
  
  <p>I have 2 rooms. room[2] and room[1]</p>
  
  <p>When i click Done i must see</p>
  
  <pre><code>Room 1: Item Name
  Room 2: Secound Item
  </code></pre>
  
  <p>Thanks for help :)</p>