无法读取AngularJS Ionic中未定义的属性dataTransfer

Question

HTML:

<div ng-if="showSubHeader" class="topPull" draggable >
            <button class="button-icon" on-swipe-down="changeSlide()"><img src="img/topImg.jpg"></button>
                           </div>

指示:

.directive('draggable', function () {
  return function(scope, element) {
        // this gives us the native JS object
        var el = element[0];
        console.log(el)
        el.draggable = true;

        el.addEventListener(
            'dragstart',
            function(e) {
                e.originalEvent.dataTransfer.effectAllowed = 'move';
               // e.dataTransfer.setData('Text', this.id);
                this.classList.add('drag');
                return false;
            },
            false
        );

        el.addEventListener(
            'dragend',
            function(e) {
                this.classList.remove('drag');
                return false;
            },
            false
        );
    }
})

错误:

Uncaught TypeError: Cannot read property 'dataTransfer' of undefined(anonymous function) @ controllers.js:12
app.js:19 Uncaught TypeError: Cannot set property 'effectAllowed' of undefined

我该如何解决这个错误？

我关注这篇文章http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html并且只需要draggable指令才能工作.

Answer 1

只需改变

 e.originalEvent.dataTransfer.effectAllowed = 'move';

同

e.dataTransfer.effectAllowed = 'move';

演示JSfiddle:http://jsfiddle.net/xvh9L6do/2/

根据:http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html