Empty Drag'n'drop dataTransfer.getDataInstantiationException

Question

Empty Drag'n'drop dataTransfer.getDataInstantiationException

I'm struggling to figure out how to make drag and drop functionality work. The getData/setData methods are puzzling me.

Here's the code I'm working with: 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', 'Why won't you show up?!')         
});

var target = angular.element(document.getElementById('drop'));
target.bind("dragover", function(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Required for dropping items.
    }
    return false;
});

target.bind("dragenter", function(e) {
    console.debug(e.dataTransfer.types);
    console.debug(e.dataTransfer.getData('text'));
});

I chose to use AngularJS in this case, as it's part of a larger project.

Whenever I drag the top square onto the bottom one, the value retrieved by getData('text') is always blank. I'm baffled by this issue...

Any insights or suggestions would be greatly appreciated!

Thank you in advance.

javascript angularjs drag-and-drop

Answer 1

Answer №1

To ensure security, the data is only accessible during drag and drop actions on this website. This prevents unauthorized data extraction by other websites.

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

To ensure security, the data is only accessible during drag and drop actions on this website. This prevents unauthorized data extraction by other websites.

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 3

Answer №2

For those seeking to retrieve data from various drop-events, the recommended approach is to utilize dataTransfer.types. One can work around the issue of dataTransfer.types automatically converting characters to lowercase by employing methods like JSON.parse, JSON.stringify, and encoding/decoding uppercase characters.

When setting data:

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

When retrieving data:

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

The process of encoding/decoding could be outlined as follows:

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

Although this method is effective, it may inadvertently awaken ancient entities such as Cthulhu.

Answer 4

For those seeking to retrieve data from various drop-events, the recommended approach is to utilize dataTransfer.types. One can work around the issue of dataTransfer.types automatically converting characters to lowercase by employing methods like JSON.parse, JSON.stringify, and encoding/decoding uppercase characters.

When setting data:

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

When retrieving data:

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

The process of encoding/decoding could be outlined as follows:

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

Although this method is effective, it may inadvertently awaken ancient entities such as Cthulhu.

Empty Drag'n'drop dataTransfer.getDataInstantiationException

Answer №1

Answer №2

Similar questions

Can we compel Morphia to convert the ObjectId into its hexadecimal representation?

Is it possible for a directive to mandate a controller on its parent(s)?

Can you explain the variance between using 'npm i' and 'npm install'?

Conditions in Controller Made Easy with AngularJS

The reference to 'this' object is not functioning properly, indicating that either a 'property' or 'method' is undefined when attempting to access a method through routes

For each variable, assign a value

My Bootstrap 4 slider is malfunctioning and needs to be fixed

SB Admin 2 menu with multiple levels does not collapse as expected

Replace all existing content on the webpage with an exciting Unity game upon clicking

Utilize the Angular route scope property $resolve in your controller rather than your view

Patience is key as you wait for the observable to finish

Angular's digest loop is a crucial feature that ensures data

Removing a custom JavaScript reference from a Drupal 7 subtheme is a task that can be accomplished

Issue with the submission button not triggering onclick event correctly

Unable to access the users property of the discord.js client

When the value remains unchanged, Angular's @Input() value does not get updated

Generate a random number not found within the given array

Switchable radio options

Issues with Javascript .map function failing to return accurate components

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I