<ion-view>
	<ion-content>
	<style>

    *{
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    [ng-drag]{
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    [ng-drag]{
        width: 100px;
        height: 100px;
        background: rgba(255,0,0, 0.5);
        color:white;
        text-align: center;
        padding-top:40px;
        display: inline-block;
        margin:0 10px;
        cursor: move;
    }
    ul.draggable-objects:after{
        display: block;
        content:"";
        clear:both;
    }
    .draggable-objects li{
        float:left;
        display: block;
        width: 120px;
        height:100px;
    }
    [ng-drag].drag-over{
        border:solid 1px red;
    }
    [ng-drag].dragging{
        opacity: 0.5;
    }
    [ng-drop]{
        background: rgba(0,255,0, 0.5);
        text-align: center;
        width: 600px;
        height: 200px;
        padding-top:90px;
        display: block;
        margin:20px auto;
        position: relative;
    }
    [ng-drop].drag-enter{
        border:solid 5px red;
    }
    [ng-drop] span.title{
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        width: 200px;
        height: 20px;
        margin-left: -100px;
        margin-top: -10px;
    }
    [ng-drop] div{
        position: relative;
        z-index: 2;
    }

  </style>
<div class="container" ng-controller="MainCtrl" style="background-color:#EEE;">
        <ul class="draggable-objects">
             <li  ng-repeat="obj in draggableObjects" >
                <div ng-drag="true" ng-drag-data="obj" data-allow-transform="true"> {{obj.name}} </div>
            </li>
        </ul>
		<!--<ul class="draggable-objects">
            <li>
                <div ng-drag="true"  data-allow-transform="true">test1</div>
            </li>
			<li>
                <div ng-drag="true"  data-allow-transform="true">test2</div>
            </li>
			<li>
                <div ng-drag="true"  data-allow-transform="true">test3</div>
            </li>
        </ul>-->

      <hr/>
      <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
          <span class="title">Drop area #1</span>

          <div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}">
              {{obj.name}}
          </div>

      </div>
    <hr>
	<button ng-click="resetFun()" >Reset</button>
</div>
	</ion-content>
</ion-view>