Javascript 在AngularJS指令内未调用Drop事件
我对将事件放入AngularJS指令有一个奇怪的问题。添加侦听器是因为控制台根据DOM元素显示-Javascript 在AngularJS指令内未调用Drop事件,javascript,angularjs,Javascript,Angularjs,我对将事件放入AngularJS指令有一个奇怪的问题。添加侦听器是因为控制台根据DOM元素显示-。当我更改为其他事件时,请单击“一切正常”。 以下是我的html代码: <div ng-app="app"> <div ng-controller="testCtrl"> <table id="testtable"> <tr> <td colspan="2" dropp
。当我更改为其他事件时,请单击“一切正常”。
以下是我的html代码:
<div ng-app="app">
<div ng-controller="testCtrl">
<table id="testtable">
<tr>
<td colspan="2" droppable>
<a data-ng-repeat="firstLink in first" href="#">
{{firstLink.text}}
</a>
</td>
</tr>
<tr>
<td>
<a data-ng-repeat="secondLink in second" href="#" draggable>
{{secondLink.text}}
</a>
</td>
<td>
<a data-ng-repeat="thirdLink in third" href="#" draggable>
{{thirdLink.text}}
</a>
</td>
</tr>
</table>
</div>
</div>
以下是JSFIDLE:
是什么导致了这种行为
致以最良好的祝愿 我找到了解决办法。来自dotoro网站参考: 默认情况下,拖动操作的目标可以是可编辑元素(textarea、input:text、input:password、input:search)、内容可编辑模式下的元素、设计模式下的文档或其他应用程序。如果要允许其他图元在拖动操作期间成为拖放目标,请取消ondragenter和ondragover事件 下面是工作JSFIDLE:
var app = angular.module('app', []);
app.controller('testCtrl', function ($scope) {
$scope.first = [
{text: 1},
{text: 2},
{text: 3}
];
$scope.second = [
{text: 4},
{text: 5},
{text: 6}
];
$scope.third = [
{text: 7},
{text: 8},
{text: 9}
];
});
app.directive('draggable', function () {
return function(scope, element) {
// this gives us the native JS object
var el = element[0];
el.draggable = true;
el.addEventListener(
'dragstart',
function(e) {
console.log('dragstart called');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('Text', 'test test test');
return false;
},
false
);
el.addEventListener(
'dragend',
function(e) {
console.log('dragend called');
e.preventDefault();
return false;
},
false
);
}
});
app.directive('droppable', function () {
return {
scope: {
drop: '&' // parent
},
link: function(scope, element) {
var el = element[0];
console.log(el);
el.addEventListener(
'drop',
function(e) {
console.log('Why im not called?');
return false;
},
false
);
}
}
});