0

now im trying to implement drag and drop on html5. I'd like to know how I can catch the information where I drop content. for example...

<div id="droppoint"></div><ul> <li draggable="true">1</li> <li draggable="true">2</li> <li draggable="true">3</li> <li draggable="true">4</li> <li draggable="true">5</li> </ul>

When I drag this li element to droppoint and drop this, I want to catch this id attribute(droppoint).

erea.addEventListener("drop", function(evt) {

  var droptext = evt.dataTransfer.getData("text");

  console.log('============================');
  console.log(droptext);
  console.log('============================');

  evt.preventDefault();
}, false);
ryo kato
  • 61
  • 1
  • 1
  • 3

1 Answers1

0
function drag_over(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}
function drop(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}

http://jsfiddle.net/robertc/kKuqH/30/

clientX and clientY are current client's coordinates (his pointer), so if you get client's coordinates while he drops, you know where he dropped the item.

Found it here: HTML5: dragover(), drop(): how get current x,y coordinates?

Have a good day =)

Community
  • 1
  • 1
Supamiu
  • 8,501
  • 7
  • 42
  • 76
  • sorry I should have written more clearly... I don't want to know the coordinates where I dropped. I want to know the id name or class name where I drop. On my code, I want to catch "droppoint" strings... but thank you for your immediate response. :) – ryo kato Oct 06 '14 at 08:10
  • In this example,I want to receive "content". Not "dragme"... hard to explain it ... – ryo kato Oct 06 '14 at 08:29
  • You want innerHTML of the dragme? then just get the .innerHTML of the item dropped and add it to the target =) – Supamiu Oct 06 '14 at 08:35