javascript - Bootstrap conflict with HTML5 drag and drop in IE11 -

javascript - Bootstrap conflict with HTML5 drag and drop in IE11 -

i'm having unusual issue native drag , drop in ie11. not drop target recognized unless included bootstrap class drop target, had add together "btn" class (i'd remove it). noticed when badge "droppable", not anchor tag or whole li had designated "droppable" element.

the code wrapped in angularjs ng-repeat (note added "btn" class):

<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>

the drag , drop directive:

'use strict'; var mongoose = mongoose || angular.module('mongoose'); mongoose .directive('draggable', function() { homecoming function(scope, element) { // gives 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'); homecoming false; }, false ); el.addeventlistener( 'dragend', function(e) { this.classlist.remove('drag'); $('.report_group').removeclass('over'); homecoming false; }, false ); }; }) .directive('droppable', function() { homecoming { scope: { drop: '&', bin: '=' }, link: function(scope, element) { // 1 time again need native object var el = element[0], bucketid = element.index()-2; el.addeventlistener( 'dragover', function(e) { e.datatransfer.dropeffect = 'move'; // allows drop if (e.preventdefault) e.preventdefault(); this.classlist.add('over'); homecoming false; }, false ); el.addeventlistener( 'dragenter', function(e) { e.datatransfer.dropeffect = 'move'; $('.report_group').removeclass('over'); this.classlist.add('over'); homecoming false; }, false ); el.addeventlistener( 'dragleave', function(e) { this.classlist.remove('over'); homecoming false; }, false ); el.addeventlistener( 'drop', function(e) { if (e.stoppropagation) e.stoppropagation(); if (e.preventdefault) e.preventdefault(); this.classlist.remove('over'); dosomething(); homecoming false; }, false ); } }; });

javascript html5 angularjs internet-explorer twitter-bootstrap