admin管理员组文章数量:1023195
I'm trying to create drag and drop directives for angularJS by following this post: /
But I can not send any data because inside the dragstart event handler dataTransfer and the originalEvent are always null.
My drag directive looks like this:
directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
var directive = {};
directive.restrict = 'A';
directive.link = function (scope, el, attrs) {
el.attr("draggable", "true");
var id = attrs.id;
if (!attrs.id) {
id = UuidService.new();
el.attr("id", id);
}
el.bind("dragstart", function (evt) {
console.log(evt);
console.log(evt.dataTransfer);
console.log(evt.originalEvent);
evt.dataTransfer.setData('text', id);
$rootScope.$emit("DRAG-START");
});
el.bind("dragend", function (evt) {
$rootScope.$emit("DRAG-END");
});
};
return directive;
}]);
I have also called $.event.props.push('dataTransfer').
I'm trying to create drag and drop directives for angularJS by following this post: http://jasonturim.wordpress./2013/09/01/angularjs-drag-and-drop/
But I can not send any data because inside the dragstart event handler dataTransfer and the originalEvent are always null.
My drag directive looks like this:
directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
var directive = {};
directive.restrict = 'A';
directive.link = function (scope, el, attrs) {
el.attr("draggable", "true");
var id = attrs.id;
if (!attrs.id) {
id = UuidService.new();
el.attr("id", id);
}
el.bind("dragstart", function (evt) {
console.log(evt);
console.log(evt.dataTransfer);
console.log(evt.originalEvent);
evt.dataTransfer.setData('text', id);
$rootScope.$emit("DRAG-START");
});
el.bind("dragend", function (evt) {
$rootScope.$emit("DRAG-END");
});
};
return directive;
}]);
I have also called $.event.props.push('dataTransfer').
2 Answers
Reset to default 4In order to solve my problem I have switched from using jQuery's bind to using JavaScript's addEventListener and everything worked as expected:
directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
var directive = {};
directive.restrict = 'A';
directive.link = function (scope, el, attrs) {
el.attr("draggable", "true");
var id = attrs.id;
if (!attrs.id) {
id = UuidService.new();
el.attr("id", id);
}
el.get(0).addEventListener("dragstart", function (evt) {
evt.dataTransfer.setData('text', id);
$rootScope.$emit("DRAG-START");
});
el.get(0).addEventListener("dragend", function (evt) {
$rootScope.$emit("DRAG-END");
});
};
return directive;
}]);
Had this same issue with a different fix: if you have an alert() or confirm() dialog in your drop handler, that clears out the event.dataTransfer.
I'm trying to create drag and drop directives for angularJS by following this post: /
But I can not send any data because inside the dragstart event handler dataTransfer and the originalEvent are always null.
My drag directive looks like this:
directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
var directive = {};
directive.restrict = 'A';
directive.link = function (scope, el, attrs) {
el.attr("draggable", "true");
var id = attrs.id;
if (!attrs.id) {
id = UuidService.new();
el.attr("id", id);
}
el.bind("dragstart", function (evt) {
console.log(evt);
console.log(evt.dataTransfer);
console.log(evt.originalEvent);
evt.dataTransfer.setData('text', id);
$rootScope.$emit("DRAG-START");
});
el.bind("dragend", function (evt) {
$rootScope.$emit("DRAG-END");
});
};
return directive;
}]);
I have also called $.event.props.push('dataTransfer').
I'm trying to create drag and drop directives for angularJS by following this post: http://jasonturim.wordpress./2013/09/01/angularjs-drag-and-drop/
But I can not send any data because inside the dragstart event handler dataTransfer and the originalEvent are always null.
My drag directive looks like this:
directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
var directive = {};
directive.restrict = 'A';
directive.link = function (scope, el, attrs) {
el.attr("draggable", "true");
var id = attrs.id;
if (!attrs.id) {
id = UuidService.new();
el.attr("id", id);
}
el.bind("dragstart", function (evt) {
console.log(evt);
console.log(evt.dataTransfer);
console.log(evt.originalEvent);
evt.dataTransfer.setData('text', id);
$rootScope.$emit("DRAG-START");
});
el.bind("dragend", function (evt) {
$rootScope.$emit("DRAG-END");
});
};
return directive;
}]);
I have also called $.event.props.push('dataTransfer').
2 Answers
Reset to default 4In order to solve my problem I have switched from using jQuery's bind to using JavaScript's addEventListener and everything worked as expected:
directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
var directive = {};
directive.restrict = 'A';
directive.link = function (scope, el, attrs) {
el.attr("draggable", "true");
var id = attrs.id;
if (!attrs.id) {
id = UuidService.new();
el.attr("id", id);
}
el.get(0).addEventListener("dragstart", function (evt) {
evt.dataTransfer.setData('text', id);
$rootScope.$emit("DRAG-START");
});
el.get(0).addEventListener("dragend", function (evt) {
$rootScope.$emit("DRAG-END");
});
};
return directive;
}]);
Had this same issue with a different fix: if you have an alert() or confirm() dialog in your drop handler, that clears out the event.dataTransfer.
本文标签：
版权声明：本文标题：javascript - event.dataTransfer and event.originalEvent are always null inside dragstart event handler - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745521638a2154340.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论