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 beingundefined
see this answer. – Spencer Wieczorek Commented Sep 8, 2015 at 12:16
1 Answer
Reset to default 8Just 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