Implement html5 drag drop in angularjs?

Question

Here is the view

.container(ng-controller="activityCtrl")
  h3 Edit your plan
  .row
    .one-half.column
      div(draggable="true" ondragstart="onDrag()") I am draggable

And i have defined a function inside controller like

$scope.onDrag = (evt)=>{
  console.log(evt);
  ev.dataTransfer.setData("text", ev.target.id);
}

The error that i am getting is Reference error onDrag not defined. I am guessing that it is somewhat because i need to reference the function defined in $scope in ondragstart. How can i do the same ?

If you are manipulating DOM You should use `Directives` in angularJS — Gangadhar Jannu, Feb 25 '17 at 12:19
check my [answer](http://stackoverflow.com/a/42456136/3543808) — Gangadhar Jannu, Feb 25 '17 at 12:38

Gangadhar Jannu · Accepted Answer · 2017-02-25T17:19:21.977

You are getting the error Reference error onDrag not defined because you're referencing a function in HTML5 event which is defined in Angular's scope.

If you really want to access $scope.onDrag function in ondragstart event, change your html like below:

div(draggable="true" ondragstart="angular.element(this).scope().onDrag()") I am draggable

Ideally angular.element(this).scope() would be used for debugging purpose so I would prefer to write a directive for drag and drop.

Below is the HTML5 drag and drop implementation in AngularJS.
I've replicated the same behavior as shown in w3schools.

Since you are manipulating DOM you should use directives in AngularJS.

I've implemented two directives

drag-me for drag
drop-me-on for drop.

You could also use single directive for both, however I prefer separation of concerns.

HTML:

<div id="div1" drop-on-me>
  <img src="https://www.w3schools.com/html/img_w3slogo.gif" drag-me  id="drag1" width="88" height="31">
</div>

<div id="div2" drop-on-me></div>

JS

angular
  .module('myApp', []);

angular
  .module('myApp')
  .directive('dragMe', dragMe)
  .directive('dropOnMe', dropOnMe);

dragMe.$inject = [];

function dragMe() {
  var DDO = {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.prop('draggable', true);
      element.on('dragstart', function(event) {
        event.dataTransfer.setData('text', event.target.id)
      });
    }
  };
  return DDO;
}
dropOnMe.$inject = [];
function dropOnMe() {
  var DDO = {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('dragover', function(event) {
        event.preventDefault();
      });
      element.on('drop', function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(data));
      });
    }
  };
  return DDO;
}

DEMO

Have a look at my fiddle

I occasionally see a great and well laid out answer like this one :D — georoot, Feb 25 '17 at 13:25
I implemented these two directives and I tried to use it on the cells of a table, but event.srcElement seems to be undefined. event.dataTransfer.setData also does not work. Why is that? — Adrian Pop, Aug 23 '17 at 08:36
@Adi try to create a plunker/fiddle so that I can look into it! — Gangadhar Jannu, Aug 23 '17 at 09:17
I managed to do it, finnaly. There is a known problem with jQuery. I found the workaround here: https://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/ — Adrian Pop, Aug 23 '17 at 09:35

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

OnDragStart is not something from the angular context, so you can't use functions defined in $scope or in your controller.

You could use some third party libraries like angular-dragdrop or ui-sortable or roll your own (see How to Create simple drag and Drop in angularjs for more details).

edited May 23 '17 at 12:09

Community

1
1

answered Feb 25 '17 at 11:26

rodrigoff

331
4
7

Implement html5 drag drop in angularjs?

2 Answers2

HTML:

JS

DEMO