与IE5拖放的Bootstrap冲突在IE11中

时间:2014-06-18 17:10:57

标签: javascript html5 angularjs internet-explorer twitter-bootstrap

我对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
    );
    }
   };
 });

0 个答案:

没有答案