我对IE11中的原生拖放有一个奇怪的问题。除非我将一个Bootstrap类包含在放置目标中,否则我无法识别放置目标,我必须添加" btn"上课(我想删掉它)。当我的徽章是" droppable"时,我注意到了这一点,但不是锚标签或我指定为" droppable"元件。
代码包含在angularjs ng-repeat中(注意添加的" btn"类):
<li ng-repeat="group in groups" droppable>
<a ng-id="{group.ReportGroupID}" class="report_group btn text-left" ng-class=" {report_group_selected: selectedGroup === group.rgName}" href="#" ng-click="selectFilterGroup(group.rgName)">
<span class="badge pull-right">{{group.totrpt}}</span>{{group.rgName}}
</a>
</li>
拖放指令:
'use strict';
var mongoose = mongoose || angular.module('Mongoose');
mongoose
.directive('draggable', function() {
return function(scope, element) {
// this gives us the native JS object
var el = element[0],
id = element.index();
el.draggable = true;
el.addEventListener(
'dragstart',
function(e) {
e.dataTransfer.effectAllowed = 'move';
this.classList.add('drag');
return false;
},
false
);
el.addEventListener(
'dragend',
function(e) {
this.classList.remove('drag');
$('.report_group').removeClass('over');
return false;
},
false
);
};
})
.directive('droppable', function() {
return {
scope: {
drop: '&',
bin: '='
},
link: function(scope, element) {
// again we need the native object
var el = element[0],
bucketId = element.index()-2;
el.addEventListener(
'dragover',
function(e) {
e.dataTransfer.dropEffect = 'move';
// allows us to drop
if (e.preventDefault) e.preventDefault();
this.classList.add('over');
return false;
},
false
);
el.addEventListener(
'dragenter',
function(e) {
e.dataTransfer.dropEffect = 'move';
$('.report_group').removeClass('over');
this.classList.add('over');
return false;
},
false
);
el.addEventListener(
'dragleave',
function(e) {
this.classList.remove('over');
return false;
},
false
);
el.addEventListener(
'drop',
function(e) {
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
this.classList.remove('over');
doSomething();
return false;
},
false
);
}
};
});