AngularJS 1.4.x

var app = angular.module('plunker', []);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular DND QuickStart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0/angular.js" data-semver="1.4.0"></script>
    <script src="https://rawgit.com/Tuch/angular-dnd/master/dist/angular-dnd.min.js"></script>
     <style type='text/css' > 


.handle {
    cursor: pointer;
}

.dropzone {
    margin:10px;
    padding:10px;
    width: 200px;
    height: 200px;
    display:block;
    border:1px solid #7565BB;
    text-align: center;
    border-radius: 10px;
    overflow:hidden;
    color:white;
    background:#7565AA;
  
    
}
.dropzone > div{
 border : 1px solid white;
}
.dropzone.active {
  
    box-shadow: inset  0 0 10px rgba(0,0,0,0.5);
    background-color: #6BC56B;
}

.dropzone.dropped {
      background: #ddffdd;
}

.dnd-container {
    padding: 10px;
    margin:0;
   background: rgb(96,108,136);
background: -moz-linear-gradient(top,  rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(to bottom,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );

    position: relative;
    
}

input {
    border-radius: 10px;
    margin:10px;
    padding:7px;
    display: block;
    width: 200px;
    border:1px solid #aaa;
}







</style>
 <script type="text/javascript">
    var app = angular.module('plunker', ['dnd']);
   
    app.controller('MainCtrl', function($scope){
        $scope.objid = 1;
        this.dragenter = function(dropmodel){
            console.log('dragenter', arguments);
            this.active = dropmodel;
        };
        this.dragover = function(){
            console.log('dragover', arguments);
        };
        this.dragleave = function(){
            console.log('dragleave', arguments);
            this.active = undefined;
        };
        this.drop = function(dragmodel, model){
            console.log('drop', arguments);
                        dragmodel.catchedObjects.push(model);
          
            this.dropped = model;
            this.active = undefined;
            $scope.objid ++;
              this.dragmodel = 'I am obj id:'+ $scope.objid ;
           
        };
        this.isDropped = function(model){
            return this.dropped === model;
        };
        this.isActive = function(model){
            return this.active === model;
        };
      
       
          this.dragmodel = 'I am obj id:'+ $scope.objid ;
          var Container1  = [];
          Container1.title = 'Container1';
          Container1.catchedObjects = [];
            var Container2  = [];
          Container2.title = 'Container2';
          Container2.catchedObjects = [];
          
            var Container3  = [];
          Container3.title = 'Container3';
          Container3.catchedObjects = [];
        this.dropmodels = [ Container1, Container2, Container3 ];
    });
</script>
  </head>

 <body ng-controller="MainCtrl as main">
   <div style="overflow:auto">
    <div >
      <div style="height:120px;">ANGULAR-DND</div>
      <div class = "dnd-container" style="overflow:auto">
              

               <input  class = "draggable handle" 
                 ng-model='main.dragmodel' type='text' dnd-draggable = "true"
                 dnd-draggable-opts = "{layer: 'layer1', helper : 'clone'}"
                 dnd-containment = "'.dnd-container'"
                 dnd-rect = "main.rect4"
                 dnd-model = "main.dragmodel"></input>
           

            <div
                ng-repeat = "dropmodel in main.dropmodels"
                class = "dropzone"
                ng-class = "{dropped: main.isDropped(dropmodel), active: main.isActive(dropmodel)}"
                dnd-droppable = "true"
                dnd-droppable-opts = "{layer: 'layer1'}"
                dnd-on-drop = "main.drop($dropmodel, $dragmodel)"
                dnd-on-dragenter = "main.dragenter($dropmodel, $dragmodel)"
                dnd-on-dragleave = "main.dragleave($dropmodel, $dragmodel)"
                dnd-on-dragover = "main.dragover($dropmodel, $dragmodel)"
                dnd-model = "dropmodel" >
                 {{dropmodel.title}}
                 
                <div ng-if='main.isActive(dropmodel)'>
                    Drop it...I am Ready.
                </div>
                <div   ng-repeat = "catched in dropmodel.catchedObjects  track by $index">{{catched}}</div>
             
            </div>

          
        </div>

    </div>
    </div>
</body>

</html>

/* Put your css in here */