Basic Summernote Setup

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

  <head>
    <style>
      .draggable {
        position:absolute;
        background-color:yellow;
        z-index: 1;
      }
      
      .droppable {
        background: #aaa;
        width: 200px;
        height: 200px;
      }
      
      .droppable__item0 {
        background-color:red;
      }
      .droppable__item1 {
        background-color:green;
      }
      .droppable__item2 {
        background-color:blue;
      }
      
      .droppable.active {
         opacity: .5;
      }
      
    </style>
    <script data-require="angular.js@1.3.*" data-semver="1.2.28" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="https://rawgit.com/Tuch/angular-dnd/master/dist/angular-dnd.js"></script>
    <script type="text/javascript">
      var app = angular.module('app', ['dnd']);
      
      app.controller('Ctrl', function() {
        var ctrl = this;
        
        this.rect = {
          "width":"150px",
          "height":"150px",
          "top":"147px",
          "left":"300px"
        };
        
        this.dragmodel = 'dragmodel';
        this.dropmodels = []; 
        this.currentDropModel = null;
        
        for (var i = 0; i < 3; i++) {
          this.dropmodels.push('dropmodel' + i);
        }

        this.dragenter = function(dropmodel) {
            console.log('dragenter', dropmodel);
            this.currentDropModel = dropmodel;
        };
        
        this.dragleave = function(dropmodel) {
            console.log('dragleave', dropmodel);
            this.currentDropModel = null;
        };
        
        this.isActive = function(dropmodel) {
            return this.currentDropModel === dropmodel;
        };
        
      });
    </script>
  </head>

  <body ng-controller = "Ctrl as ctrl" style="height: 1000px" >

    <div class = "draggable" dnd-draggable dnd-rect = "ctrl.rect" dnd-model = "ctrl.dragmodel"> </div>
    
    <div class = "droppable droppable__item{{ $index }}" 
        ng-repeat = "dropmodel in ctrl.dropmodels"
        ng-class = "{active: ctrl.isActive(dropmodel)}"
        dnd-droppable dnd-model = "dropmodel" 
        dnd-on-dragenter = "ctrl.dragenter($dropmodel, $dragmodel)"
        dnd-on-dragleave = "ctrl.dragleave($dropmodel, $dragmodel)"
    > </div>
    
  </body>

</html>