javascript onDrop事件未执行

Question

当对象被放入放置区时，javascript onDrop事件不会执行。我试过用至少六种方式重写这个，没有运气也没有错误信息。我正在寻找可以阻止ondrop事件执行的原因并找到：

HTML5/Canvas onDrop event isn't firing? 和 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets

据我所知，我已经完成了触发ondrop事件的所有三个要求。我实现了ondragenter和ondragover事件，它们都包含event.preventDefault（）;并返回false;我也有event.preventDefault（）;在ondrop事件中。

＆＃13;

＆＃13;

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.lists = [{name: "A", list: ["A Object 1", "A Object 2", "A Object 3"]},
      {name: "B", list: ["B Object 1", "B Object 2", "B Object 3"]}];
    $scope.drag_index = null;
    $scope.drag_obj = null;
});

var dragging = false;

function toggle_dz() {
    $(".drop-it").toggle();
}

function get_gbls(cs) {
		while (cs.$parent) {
        cs = cs.$parent;
    }
    return cs;
}

app.directive('zoneIt', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).on('dragenter',function(event){
                event.preventDefault();
                console.log("Drag Enter!");
                return false;
            });
            $(element).on('dragover',function(event){
                event.preventDefault();
                console.log("Drag Over!");
                return false;
            });
        }
    };
});

app.directive('dragIt', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).on('drag',function(event){
                var scope = angular.element(event.target).scope();
                get_gbls(scope).drag_index = scope.$index;
                get_gbls(scope).drag_obj = scope.obj;
                if (!dragging) {
                    toggle_dz();
                    dragging = true;
                }
            });
            $(element).on('drop',function(event){
                event.preventDefault();
                alert("DROPPED!");
            });
            $(element).on('dragend',function(event){
                toggle_dz();
                dragging = false;
                var scope = angular.element(event.target).scope();
                get_gbls(scope).drag_index = null;
                get_gbls(scope).drag_obj = null;
                get_gbls(scope).$apply();
            });
        }
    };
});

＆＃13;

.zone-it {
  height: 150px;
  width: 90%;
  background-color: #1B6269;
  border: 10px dashed #4D3A44;
  border-radius: 10px;
  margin: 10px 5%;
  padding: 15px;
  font-size: 100px;
  color: #4D3A44;
  text-shadow: 0 0 10px black;
}
.zone-it span {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" ng-app="myApp" ng-controller="myCtrl">
  <h2>Angular Drag n Drop</h2>
  <div class="col-xs-6" ng-repeat="list in lists">
    <h3>{{list.name}}</h3>
    <hr>
    <div class="col-xs-12 drop-it zone-it" zone-it style="display: none;"><span class="text-center glyphicon glyphicon-download"></span></div>
    <div class="drop-it container-it">
      <div class="col-sm-6 col-md-4 col-lg-3" ng-repeat="obj in list.list">
        <div class="thumbnail drag-it" draggable="true" drag-it style="cursor:pointer">
          <div class="caption text-center">{{obj}}</div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是我的代码的小提琴：https://jsfiddle.net/Ashkeelun/2uLwd077/1/

Answer 1

所以，我明白了。 ondrop事件属于放置区而不是被拖动的项。

https://jsfiddle.net/Ashkeelun/2uLwd077/4/

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.lists = [{name: "A", list: ["A Object 1", "A Object 2", "A Object 3"]},
    								{name: "B", list: ["B Object 1", "B Object 2", "B Object 3"]}];
    $scope.drag_index = null;
    $scope.drag_obj = null;
});

var dragging = false;

function toggle_dz() {
    $(".drop-it").toggle();
}

function get_gbls(cs) {
		while (cs.$parent) {
        cs = cs.$parent;
    }
    return cs;
}

app.directive('zoneIt', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).on('dragenter',function(event){
                event.preventDefault();
                console.log("Drag Enter!");
                return false;
            });
            $(element).on('dragover',function(event){
                event.preventDefault();
                console.log("Drag Over!");
                return false;
            });
            $(element).on('drop',function(event){
                event.preventDefault();
                alert("DROPPED!");
            });
        }
    };
});

app.directive('dragIt', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).on('drag',function(event){
                var scope = angular.element(event.target).scope();
                get_gbls(scope).drag_index = scope.$index;
                get_gbls(scope).drag_obj = scope.obj;
                if (!dragging) {
                    toggle_dz();
                    dragging = true;
                }
            });
            $(element).on('dragend',function(event){
                toggle_dz();
                dragging = false;
                var scope = angular.element(event.target).scope();
                get_gbls(scope).drag_index = null;
                get_gbls(scope).drag_obj = null;
                get_gbls(scope).$apply();
            });
        }
    };
});

.zone-it {
  height: 150px;
  width: 90%;
  background-color: #1B6269;
  border: 10px dashed #4D3A44;
  border-radius: 10px;
  margin: 10px 5%;
  padding: 15px;
  font-size: 100px;
  color: #4D3A44;
  text-shadow: 0 0 10px black;
}
.zone-it span {
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container-fluid" ng-app="myApp" ng-controller="myCtrl">
  <h2>Angular Drag n Drop</h2>
  <div class="col-xs-6" ng-repeat="list in lists">
    <h3>{{list.name}}</h3>
    <hr>
    <div class="col-xs-12 drop-it zone-it" zone-it style="display: none;"><span class="text-center glyphicon glyphicon-download"></span></div>
    <div class="drop-it container-it">
      <div class="col-sm-6 col-md-4 col-lg-3" ng-repeat="obj in list.list">
        <div class="thumbnail drag-it" draggable="true" drag-it style="cursor:pointer">
          <div class="caption text-center">{{obj}}</div>
        </div>
      </div>
    </div>
  </div>