Bound element from dragging beyond the screen

Hi all …!!

i am trying to have HTML element dragging around the screen but…
===>CONDITION is that from specific DIV to some specific DIV
like i have three section in my screen middle one contains list item, bottom one contains the 10 img tag that i want to drag to the top div element…

here is so far i have done, I create 10 img tag surrounded with div tag and its is draggable also around the screen i need some condition based on that i restrict img tag to not dragged at wrong div !!!

var app = angular.module('starter', ['ionic','ngCordova','ngStorage']);

// ========================== Controller ==========================
// $scope.draggedStyle = {};
// $scope.draggedStyle_1 = {};
$scope.number = [1,2,3,4,5,6,7,8,9,10];

    $scope.onDrag = function(event)  {
          $scope.draggedStyle_1 = {
....continue to 10 (i have 10 ing tag)

$scope.onRelease = function(event)  {
  console.log("you put number :";

Here is my HTML :

<ion-view view-title="Home">
  <ion-content ng-controller="TempCtrl" class = "homeContent" scroll="false">
<div class="upper" style="float: left;
    width: 300px;
    height: 300px;
    margin: 50px;
    padding: 10px;
    border: 1px solid black";>
</div>  <========================== in only this div img tag should be draggable

<div class="middle">
     This is middle tage where IMG tag is not to be draggable 

<div class="bottom">
    <div ng-repeat="i in number">
	<div on-drag="onDrag($event)"  on-release="onRelease($event)" id="dragged_{{i}}" class="draggable"  ng-style="draggedStyle_{{i}}" style="position: absolute; cursor: pointer;">
       <img class="number_{{i}}" id="{{i}}" src="img/number-one-inside-a-circle.svg" height="50px" width="50px">
</div>  <=========================== img tag is available here