Drag'n'drop dataTransfer.getData为空 [英] Drag'n'drop dataTransfer.getData empty

问题描述

我正在尝试拖动工作，但我似乎完全失去了getData / setData的工作原理。

我正在使用此代码（ 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'，'你去哪里了！ 
 
 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为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！