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。我猜这是因为我需要在ondragstart中引用$ scope中定义的函数。我怎么能这样做？

Answer 1

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

如果您确实想要在$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，因此您应该在directives中使用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;
}

样本

查看我的fiddle

Answer 2

OnDragStart不是角度上下文中的东西，因此您不能使用$ scope或控制器中定义的函数。

您可以使用某些第三方库，例如angular-dragdrop或ui-sortable，也可以自行推送（有关详细信息，请参阅How to Create simple drag and Drop in angularjs）。

在angularjs中实现html5拖放？

2 个答案:

HTML：

JS

样本