问题描述
我正在尝试拖动工作,但我似乎完全失去了getData / setData的工作原理。
我正在使用此代码()
var el = angular.element(document.getElementById('drag'));
el.attr(draggable,true);
el.bind(dragstart,function(e){
e.dataTransfer.setData('text','你去哪里了!
var target = angular.element(document.getElementById('drop'));
target.bind(dragover,function(e){
if(e.preventDefault){
e.preventDefault(); //必要。允许我们删除
}
return false;
});
target.bind(dragenter,function(e){
console.debug(e.dataTransfer.types);
console.debug(e.dataTransfer.getData 'text'));
});
我在这里使用AngularJS,因为这是一个更大的代码片段。 p>
由于某些原因,当拖动底部正方形的顶部正方形时,getData('text')的值始终为空,但我不知道为什么...
任何想法?
提前感谢
数据仅在下载时可用,这是一个安全功能,因为当您恰好在网页上拖动某些东西时,网站可以抓取数据。
< script src =https:// ajax。 googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js\"></script><div id =dragstyle =width:100px; height:100px; background-color:蓝色;>< / div>< div id =dropstyle =width:100px; height:100px; background-color:green;>< / div>
I'm trying to get drag'n'drop to work, but I seem to be completely missing how the getData/setData works.
I'm using this code (http://jsfiddle.net/ASKte/218/)
var el = angular.element(document.getElementById('drag'));
el.attr("draggable", "true");
el.bind("dragstart", function(e) {
e.dataTransfer.setData('text', 'Where have you gone?!?!')
});
var target = angular.element(document.getElementById('drop'));
target.bind("dragover", function(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
return false;
});
target.bind("dragenter", function(e) {
console.debug(e.dataTransfer.types);
console.debug(e.dataTransfer.getData('text'));
});
I'm using AngularJS here because this is a snippet of a much larger piece of code.
For some reason when dragging the top square on the bottom square, the value of getData('text') is always empty, but I have no idea why...
Any ideas?
Thanks in advance.
The data is only available on drop, this is a security feature since a website could grab data when you happen to be dragging something across the webpage.
var el = angular.element(document.getElementById('drag'));
el.attr("draggable", "true");
el.bind("dragstart", function(e) {
e.dataTransfer.setData('text', 'Where have you gone?!?!')
});
var target = angular.element(document.getElementById('drop'));
target.bind("dragover", function(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
return false;
});
target.bind("drop", function(e) {
console.debug(e.dataTransfer.types);
console.debug(e.dataTransfer.getData('text'));
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="drag" style="width: 100px; height: 100px; background-color: blue;"></div>
<div id="drop" style="width: 100px; height: 100px; background-color: green;"></div>
这篇关于Drag'n'drop dataTransfer.getData为空的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!