在angularjs中实现html5拖放？

Question

这是观点

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

我已经在控制器中定义了一个函数

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

我得到的错误是Reference error onDrag not defined.我猜这是因为我需要引用$ scope中定义的函数ondragstart.我怎么能这样做？

Answer 1

您收到错误Reference error onDrag not defined是因为您在HTML5事件中引用了一个函数,该函数在Angular的范围内定义.

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

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

理想情况下,angular.element(this).scope()它将用于调试目的,所以我更愿意写一个directive拖放.

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

因为你在操纵DOM你应该使用directivesin AngularJS.

我已经实现了两个指令

• drag-me 对于 drag
• 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;
}

DEMO

看看我的小提琴