Question

我尝试使用angular实现html5拖放。

代码是：

<div ondrop="drop(event)"></div>

在控制器中：

$scope.drop = function(e) { console.log('a drop') };

这会导致错误：

未捕获的ReferenceError：未定义drop

与'ondrop'交换'ng-click'使其有效，因此控制器中没有任何遗漏。

Answer 1

ng-click是由angular本身定义的指令。 ondrop，据我所知，不是angular标准库的一部分。您需要定义一个新指令才能获得所需的功能。我建议看看这篇博文 http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

Answer 2

ondrop是一个HTML属性，因此它期望给定的函数是全局的，而不是像ng-click那样期望回调在$scope上发布的角度指令。

Answer 3

您可以通过将在该事件中触发的函数连接到您的范围来使用非角度事件。在这种情况下：

ondrop='angular.element(document.getElementById("Id of element with ngController,or ngView(if you use router)")).scope().drop(event)'

这里我修改了W3Schools的拖放示例：

＆＃13;

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<style>
#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
    <body ng-app="myApp">

      <div data-ng-controller="myCtrl" id="myContrId">
    <div id="div1" ondrop='angular.element(document.getElementById("myContrId")).scope().drop(event)' ondragover='angular.element(document.getElementById("myContrId")).scope().allowDrop(event)'>
      <img src="https://diethelper.xyz/DHadmin/images/logo2w.png" draggable="true" ondragstart='angular.element(document.getElementById("myContrId")).scope().drag(event);' id="drag1" width="88" height="31">
    </div>

    <div id="div2" ondrop='angular.element(document.getElementById("myContrId")).scope().drop(event)' ondragover='angular.element(document.getElementById("myContrId")).scope().allowDrop(event)'></div>
  </div>
      <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
          $scope.allowDrop = function(ev) {
            ev.preventDefault();
          }

          $scope.drag = function(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
          }

          $scope.drop = function(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
          }
        });
      </script>

    </body>

    </html>

＆＃13;

ondrop ondragover - 未捕获的ReferenceError：未定义ondrop - angular - html5 draggable

3 个答案: