JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<div ng-app="myApp" ng-controller="c">

  <div id="dropZone" class="{{dropClass}}" droppable droppable-enter="changeColor" droppable-over="cancelOver" dropappable-leave="leftDroppable">
  drop a directory or file to analyze
  </div>
</div>

CSS

#dropZone
{
  
  width:300px;
  height:300px;
}

.normalColor
{

    background-color:#444;
}

.dropColor
{
  transition:.2s linear all;
  background-color:#fff;
}

JavaScript

var mod = angular.module('myApp',['ngAnimate']);


mod.controller('c',function($scope){

  var drop = document.getElementById('dropZone');

	$scope.dropClass= 'dropColor';

  $scope.changeColor = function(){
  	alert('in');
  	$scope.dropClass = 'dropColor';
    console.log('dragged in');
  }
  
  $scope.leftDroppable = function(){
  	alert('left');
  
  }
  
  $scope.cancelOver = function(){return false};
  


});

mod.directive('droppable',function(){

	return {
  	restrict : 'A',
    link : function(scope,elem,attr,con)
    {
    		elem = angular.element(elem);
    
    		elem.ondragenter = attr.droppableEnter;
        elem.ondragleve = attr.droppableLeave;
        elem.ondragover = attr.droppableOver;
        elem.ondrop = attr.droppableDrop;
    
    }
  
  };

});