javascript - 在angularjs中实现html5拖放？

Question

这是 View

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

我在 Controller 中定义了一个函数，例如

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

我收到的错误是未定义 onDrag 引用错误。我猜测这在某种程度上是因为我需要引用 ondragstart 中 $scope 中定义的函数。我怎样才能做同样的事情？

Answer 1

您收到错误Reference error onDrag not Define，因为您在 HTML5 事件中引用了 Angular 作用域中定义的函数。

如果您确实想在 ondragstart 事件中访问 $scope.onDrag 函数，请更改您的 html，如下所示:

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.

<小时/>

下面是 AngularJS 中的 HTML5 拖放实现。
我复制了与 w3schools 中所示的相同行为.

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

我已经实现了两个指令

• drag-me 用于拖动
• drop-me-on 表示 drop。

您也可以对两者使用单个指令，但我更喜欢关注点分离。

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

演示

看看我的fiddle