Disable html5 drop on input and textarea

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    
    <div ng-controller="MainCtrl">
      <h4>Disable html5 drop on input and textarea:</h4>
      <div class="dragger" my-drag></div>
      <img src="http://lorempixel.com/80/80/" />
      <br><br><br><br>
      <h5>without the directive:</h5>
      <input type="text" ng-model="myData.input1" />
      <br>
      <textarea ng-model="myData.textarea1"></textarea>
      <br><br>
      <h5>with the directive:</h5>
      <input type="text" ng-model="myData.input2" drop-disable />
      <br>
      <textarea ng-model="myData.textarea2" drop-disable></textarea>
      <br><br>
      <div class="drop-zone" my-drop></div>
      <br>
      <p class>{{ myData | json }}</p>
    </div>
    
    
  </body>

</html>

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

app.controller('MainCtrl', function($scope) {
  
  $scope.myData = {
      input1: ' input text 1',
      textarea1: 'textarea text 1',
      input2: ' input text 2',
      textarea2: 'textarea text 2'
  };
  
});




app.directive('myDrag', function($rootScope, $timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			attrs.$set('draggable', 'true');
			var dragStyle = 'drag-in-progress';
			
			element.bind('dragstart', function(event) {
				element.addClass(dragStyle);
				event.dataTransfer.setData('text/plain', 'drag blablalba');
				event.dataTransfer.effectAllowed = 'move';
				event.stopPropagation();
			});
			
			element.bind('dragend', function(event) {
					element.removeClass(dragStyle);
				  event.stopPropagation();
			});
		}
	}
});


app.directive('myDrop', function($rootScope, $timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)  {
			var dropStyle = 'drop-hover';
			
			element.bind('dragenter', function(event) {
				event.preventDefault();
				
				// why? because http://stackoverflow.com/questions/14203734/dragend-dragenter-and-dragleave-firing-off-immediately-when-i-drag
		    $timeout(function() {
		      element.addClass(dropStyle);
		    });
			});
			
			element.bind('dragleave', function(event) {
				element.removeClass(dropStyle);
			});
			
			element.bind('dragover', function(event) {
				event.preventDefault();
			});
			
			element.bind('drop', function(event) {
				event.preventDefault();
				
				element.removeClass(dropStyle);
			});
		}
	}
});


app.directive('dropDisable', function() {
    return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			var handler = function(event) {
				event.preventDefault();
				return false;
			}
			element.on('dragenter', handler);
			element.on('dragover', handler);
			element.on('drop', handler);
		}
	};
});


body {
  margin: 20px;
}

.dragger {
  display: block;
  width: 80px;
  height: 80px;
  background: red;
  
  &.drag-in-progress {
    opacity: .4;
  }
}

.dragger,
img {
  float: left;
  margin-left: 10px;
  cursor: move;
}

.drop-zone {
  display: block;
  width: 100px;
  height: 100px;
  border: 6px dashed grey;
  
  &.drop-hover {
    border-color: red;
  }
}