拖放 dataTransfer.getData 为空

问题描述

我试图让拖放工作，但我似乎完全不知道 getData/setData 是如何工作的.

I'm trying to get drag'n'drop to work, but I seem to be completely missing how the getData/setData works.

我正在使用此代码 (http://jsfiddle.net/ASKte/218/)

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'));
});

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

I'm using AngularJS here because this is a snippet of a much larger piece of code.

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

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...

有什么想法吗?

提前致谢.

推荐答案

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

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>

这篇关于拖放 dataTransfer.getData 为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！