title: How to reject a drop item/event in html5 drag and drop with Angularjs
body: <p>I was searching on how I can cancel a drop event based on some logic. I came across this example which shows how to do native drag and drop in html5 using <code>Angularjs</code> <a href="http://jsfiddle.net/CW2LC/" rel="nofollow">http://jsfiddle.net/CW2LC/</a></p>
  
  <p>On this example can some one please show us how to cancel a drop event. So if I want to prevent the word 'Blue' from being dropped but allow it to be dragged, how can I achieve that?</p>
  
  <p>For complete reference, here is the <code>html</code>, <code>css</code> and <code>javascript</code> code from the example mentioned above</p>
  
  <pre><code>    .container {
        width: 600px;
        border: 1px solid #CCC;
        box-shadow: 0 1px 5px #CCC;
        border-radius: 5px;
        font-family: verdana;
        margin: 25px auto;
      }
  
      .container header {
        background: #f1f1f1;
        background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
        background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
        background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
        background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
        box-shadow: 0 1px 2px #888;
        padding: 10px;
      }
  
      .container h1 {
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-weight: normal;
        text-shadow: 0 1px 2px white;
        color: #888;
        text-align: center;
      }
  
      .container section {
        padding: 10px 30px; 
        font-size: 12px;
        line-height: 175%;
        color: #333;
      }
  
  
      &lt;div ng-app="my-app" ng-controller="MainController"&gt;
          &lt;div class="container"&gt;
              &lt;header&gt;&lt;h1&gt;Draggables&lt;/h1&gt;&lt;/header&gt;
              &lt;section&gt;
                  &lt;div draggable="true" ng-repeat="drag_type in drag_types"&gt;{{drag_type.name}}&lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;header&gt;&lt;h1&gt;Drop Schtuff Here&lt;/h1&gt;&lt;/header&gt;
              &lt;section droppable="true"&gt;
                  &lt;div&gt;&lt;span&gt;You dragged in: &lt;/span&gt;
                      &lt;span ng-repeat="name in items"&gt;
                          &lt;span ng-show="$index != 0"&gt;,&lt;/span&gt;
                          {{name}}
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
  
          &lt;button ng-click='sayHi()'&gt;Say hi!&lt;/button&gt;
          &lt;pre&gt;{{items|json}}&lt;/pre&gt;
      &lt;/div&gt;
  
  
  var module = angular.module('my-app', []);
  
  module.directive('draggable', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element[0].addEventListener('dragstart', scope.handleDragStart, false);
        element[0].addEventListener('dragend', scope.handleDragEnd, false);
      }
    }
  });
  
      module.directive('droppable', function () {
        return {
          restrict: 'A',
          link: function (scope, element, attrs) {
            element[0].addEventListener('drop', scope.handleDrop, false);
            element[0].addEventListener('dragover', scope.handleDragOver, false);
          }
        }
      });
  
      function MainController($scope)
      {
          $scope.drag_types = [
              {name: "Blue"},
              {name: "Red"},
              {name: "Green"},
          ];
          $scope.items = [];
  
          $scope.handleDragStart = function(e){
              this.style.opacity = '0.4';
              e.dataTransfer.setData('text/plain', this.innerHTML);
          };
  
          $scope.handleDragEnd = function(e){
              this.style.opacity = '1.0';
          };
  
          $scope.handleDrop = function(e){
              e.preventDefault();
              e.stopPropagation();
              var dataText = e.dataTransfer.getData('text/plain');
              $scope.$apply(function() {
                  $scope.items.push(dataText);
              });
              console.log($scope.items);
          };
  
          $scope.handleDragOver = function (e) {
              e.preventDefault(); // Necessary. Allows us to drop.
              e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
              return false;
        };
  
          $scope.sayHi = function() {
              alert('Hi!');
          };
  
      }
  </code></pre>
  
  <p>Thanks
  Sul</p>