Drag'n'drop dataTransfer.getData empty

Question

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

I\'m using this code (http://jsfiddle.net/ASKte/218/)

Answer 1

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