javascript - setdata - datatransfer jquery

Drag''n''drop dataTransfer.getData vacío

Question

Intento que drag''n''drop funcione, pero parece que me falta completamente cómo funciona getData / setData.

Estoy usando este código ( 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''));
});

Estoy usando AngularJS aquí porque este es un fragmento de un código mucho más grande.

Por alguna razón, al arrastrar el cuadro superior en el cuadro inferior, el valor de getData (''texto'') siempre está vacío, pero no tengo idea de por qué ...

¿Algunas ideas?

Gracias por adelantado.

Answer 1

Los datos solo están disponibles al soltar, esta es una función de seguridad ya que un sitio web podría tomar datos cuando está arrastrando algo a través de la página web.

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>