How to reject a drop item/event in html5 drag and drop with Angularjs

Question

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 Angularjs http://jsfiddle.net/CW2LC/

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?

For complete reference, here is the html, css and javascript code from the example mentioned above

    .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;
    }


    <div ng-app="my-app" ng-controller="MainController">
        <div class="container">
            <header><h1>Draggables</h1></header>
            <section>
                <div draggable="true" ng-repeat="drag_type in drag_types">{{drag_type.name}}</div>
            </section>
        </div>
        <div class="container">
            <header><h1>Drop Schtuff Here</h1></header>
            <section droppable="true">
                <div><span>You dragged in: </span>
                    <span ng-repeat="name in items">
                        <span ng-show="$index != 0">,</span>
                        {{name}}
                    </span>
                </div>
            </section>
        </div>

        <button ng-click='sayHi()'>Say hi!</button>
        <pre>{{items|json}}</pre>
    </div>


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!');
        };

    }

Thanks Sul

Ouascyph · Accepted Answer · 2014-07-02 21:49:21Z

1

Just adding a simple check in handleDrop() function did the trick. To prevent 'Blue' from being dropped, I added the check as below:

$scope.$apply(function() {
   if (dataText != 'Blue') { // prevent the text 'Blue' from being dropped
      $scope.items.push(dataText);
   }
});

But if you want to prevent drop altogether, just remove the method

$scope.$apply()

~ Wasif

answered Jul 2, 2014 at 21:49

Ouascyph

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to reject a drop item/event in html5 drag and drop with Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related