javascript - 拖放 dataTransfer.getData 为空

Question

我正在尝试让拖放工作，但我似乎完全不知道 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', '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'));
});

我在这里使用的是 AngularJS，因为这是一段更大代码的片段。

由于某些原因，将顶部方 block 拖动到底部方 block 上时，getData('text') 的值始终为空，但我不知道为什么...

有什么想法吗？

提前致谢。

Answer 1

数据仅在拖放时可用，这是一项安全功能，因为当您碰巧在网页上拖动某些内容时，网站可能会获取数据。

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>