angularjs html5,在angularjs中实现html5拖放？

您收到错误Reference error onDrag not defined，因为您正在引用Angular范围内定义的HTML5事件中的函数。

如果您确实想要在$scope.onDrag事件中访问ondragstart功能，请更改您的html，如下所示：

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

理想情况下，angular.element(this).scope()将用于调试目的

所以我宁愿写一个directive进行拖放。

以下是AngularJS中的HTML5拖放实现

我已经复制了w3schools中显示的相同行为。

由于您正在操纵DOM，因此您应该在directives中使用AngularJS。

我已经实现了两个指令

{li> drag-me drag

drop-me-on代表drop。

你也可以使用单指令，但我更喜欢分离关注点。

HTML：

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;

}

样本