drag'n'drop dataTransfer.getData가 비어 있습니다.

drag'n'drop dataTransfer.getData가 비어 있습니다.

drag'ndrop을 작동시키려고 하는데 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'));
});

Angular를 사용하고 있습니다.JS는 훨씬 더 큰 코드의 일부이기 때문입니다.

어떤 이유에서인지 맨 아래 정사각형의 맨 위 정사각형을 끌 때 getData('text') 값이 항상 비어 있는데 왜 그런지 모르겠습니다.

좋은 생각 있어요?

잘 부탁드립니다.

데이터는 드롭 시에만 사용할 수 있습니다.이것은 웹 사이트에서 웹 페이지를 가로질러 무언가를 끌 때 데이터를 가져올 수 있기 때문에 보안 기능입니다.

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.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()
    );
  }

효과는 있지만, 그 과정에서 Cthulhu를 소환할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/28487352/dragndrop-datatransfer-getdata-empty