import angular from 'angular';
import 'ng1-html5-dnd';

angular
  .module('app-module-name', ['ng1-html5-dnd'])
  .component('AppComponent', {
    template: `
      <div ng-draggable
           allow-drag="ctrl.allowDrag"
           on-drag-start="ctrl.onDragStart"
           on-drag="ctrl.onDrag"
           on-drag-end="ctrl.onDragEnd"
           dragEffect="'copy'"
      >
        Draggable div
      </div>

      <div ng-droppable
           allow-drop="ctrl.allowDrop"
           on-drag-enter="ctrl.onDragEnter"
           on-drag-over="ctrl.onDragOver"
           on-drop="ctrl.onDrop"
      >
        Droppable zone
      </div>
    `,
    controller: AppController,
  });

function AppController() {
  const ctrl = this;

  ctrl.allowDrag = function() {
    return true; 
  };

  ctrl.onDragStart = function(e) {
    console.log('onDragStart', e);
  };
  
  ctrl.onDragEnd = function(e) {
    console.log('onDragEnd', e);
  };
  
  ctrl.onDrag = function(e) {
    console.log('onDrag1', e);
  };

  ctrl.allowDrop = function(e) {
    return true;
  };
  
  ctrl.onDrop = function(e) {
    e.preventDefault();
    console.log('onDrop', e);
  };
  
  ctrl.onDragOver = function(e) {
    e.preventDefault();
    console.log('onDragOver', e);
  };
  
  ctrl.onDragEnter = function(e) {
    console.log('onDragEnter', e);
  };
}