Drag'n'drop 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,因为这是一段更大的代码片段.

出于某种原因,当拖动底部正方形的顶部正方形时,getData('text')的值始终为空,但我不知道为什么......

有任何想法吗？

提前致谢.

Answer 1

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

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>

Answer 2

如果您确实需要访问其他放置事件中的数据，请使用dataTransfer.types. 使用JSON.parse,JSON.stringify并对大写字符进行编码/解码以避开dataTransfer.types小写字符。

设定数据：

event.dataTransfer.setData(encodeUpperCase(JSON.stringify(value)), '');

获取数据：

const data = JSON.parse(decodeUpperCase(event.dataTransfer.types[0]))

编码/解码的过程如下：

  const UPPERCASE_PREFIX = '^{';
  const UPPERCASE_SUFFIX = '}^';

  function encodeUpperCase(str: string): string {
    return str.replace(/([A-Z]+)/g, `${UPPERCASE_PREFIX}$1${UPPERCASE_SUFFIX}`);
  }

  function decodeUpperCase(str: string): string {
    const escapeRegExp = (escape: string) => ['', ...escape.split('')].join('\\');

    return str.replace(
      new RegExp(`${escapeRegExp(UPPERCASE_PREFIX)}(.*?)${escapeRegExp(UPPERCASE_SUFFIX)}`, 'g'),
      (_, p1: string) => p1.toUpperCase()
    );
  }

它有效，但你可能会在此过程中召唤克苏鲁。