最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Cannot read property dataTransfer of undefined in AngularJS Ionic - Stack Overflow

programmeradmin9浏览0评论

html:

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

directive:

.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
        );
    }
})

Error:

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

How do I fix this error?

I followed this post .html and need only the draggable directive to work.

html:

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

directive:

.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
        );
    }
})

Error:

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

How do I fix this error?

I followed this post http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html and need only the draggable directive to work.

Share Improve this question edited Sep 8, 2015 at 12:30 ci_ 8,77410 gold badges41 silver badges63 bronze badges asked Sep 8, 2015 at 12:11 Simran KaurSimran Kaur 1,1017 gold badges24 silver badges41 bronze badges 1
  • It;s possible your broswer isn't patible with e.originalEvent (where you can simply use the native window event), and hence being undefined see this answer. – Spencer Wieczorek Commented Sep 8, 2015 at 12:16
Add a ment  | 

1 Answer 1

Reset to default 8

Just change the

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

with

e.dataTransfer.effectAllowed = 'move';

Demo JSfiddle: http://jsfiddle/xvh9L6do/2/

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

发布评论

评论列表(0)

  1. 暂无评论