Bound element from dragging beyond the screen

ionic-v1
1

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 ==========================
app.controller('TempCtrl',['$scope',function($scope){
// $scope.draggedStyle = {};
// $scope.draggedStyle_1 = {};
$scope.number = [1,2,3,4,5,6,7,8,9,10];

    $scope.onDrag = function(event)  {
        if(event.target.className==="number_1"){
          $scope.draggedStyle_1 = {
            'left': event.gesture.center.pageX+'px',
            'top': event.gesture.center.pageY+'px'
          };
....continue to 10 (i have 10 ing tag)
         
        }

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

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>

<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>
  	</div>
</div>  <=========================== img tag is available here
  </ion-content>
</ion-view>