Get positions

Get the positions of multiple elements

by strydom

HTML

<section id="AppBox">
  <div class="AppList">

    <div id="TimenDate" class="App Fixed Size110x350">
      <p id="posThis"></p>
    </div>

    <div id="User" class="App Fixed Size110x290">
    </div>

    <div id="Weather" class="App Fixed Size110x350">
    </div>
  </div>
</section>

CSS

#AppBox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}

.AppList {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.App {
  position: absolute;
  display: block;
  margin: 5px;
  padding: 0;
  box-shadow: 0 0 5px 1px black;
  color: #FFFFFF;
  cursor: move;
}


/* Default 60x60 -10 = 50x50*/

.Size110x290 {
  height: 110px;
  width: 290px;
}

.Size110x350 {
  height: 110px;
  width: 350px;
}

#TimenDate {
  top: 0;
  left: 0;
}

#User {
  top: 0;
  left: 360px;
}

#Weather {
  top: 0;
  left: 660px;
}

#TimenDate,
#User,
#Weather {
  background: linear-gradient(to bottom, #1d1d1d 0px, #101010 100%) repeat scroll 0 0 #1d1d1d;
}

JavaScript

$(document).ready(function() {
  newAppDraggable();
});

function newAppDraggable() {
  $('.App').draggable({
    containment: "#AppBox",
    grid: [60, 60],
    stack: ".App"
  });
};

$(function() {
  $('.AppList').droppable({
    accept: ".App",
    tolerance: 'fit',
    drop: function(event, ui) {
      var apps = $(".App"),
        positions = [];

      $.each(apps, function(index, app) {
        var positionInfo = $(app).position();

        positions.push(positionInfo);
      });
      /*
            var Time = positions[0];
			var x=document.getElementById("posThis");
			x.innerHTML= '[' + Time.left + ',' + Time.top + ']';
			console.log(positions);
            */

      var test = positions.join("/");
      console.log(test);
    }
  });
});