I wondered how to get the text value of a drop event. It seems to be an easy question but surprisingly I can't find an answer that works.

Demo below

<script src=".12.0/jquery.min.js"></script>
<div id="dropbox" contenteditable="true" id="dropbox">
</div>

<style>
#dropbox{
width:400px;
height:60px;
background-color: #87cefa;
}
</style>

<script>
$('#dropbox').on('drop', function(e) {

console.log(e.dataTransfer); //first try
console.log(e.getData('Text'));  //second try

});     
</script>

I wondered how to get the text value of a drop event. It seems to be an easy question but surprisingly I can't find an answer that works.

Demo below

<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="dropbox" contenteditable="true" id="dropbox">
</div>

<style>
#dropbox{
width:400px;
height:60px;
background-color: #87cefa;
}
</style>

<script>
$('#dropbox').on('drop', function(e) {

console.log(e.dataTransfer); //first try
console.log(e.getData('Text'));  //second try

});     
</script>

• javascript
• jquery
• html
• ajax

Share Improve this question Follow asked Feb 6, 2016 at 0:05 ryanpikaryanpika 15133 silver badges1313 bronze badges 2

• what do you mean by "the text value of a drop event" ? Events don't have text value. – DinoMyte Commented Feb 6, 2016 at 0:43
• get the value of the text which user dropped , I mean. – ryanpika Commented Feb 6, 2016 at 1:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It looks like you almost had is, but since you are using jQuery, the original event used in Mozilla's example (for example) needs to be accessed as follows:

console.log(e.originalEvent.dataTransfer.getData("text"));

The above link also shows how to prevent the browser from following the text as if it were a url (by disabling the default behavior for both 'dragover' and 'drop'). You also need to make sure that there is space in the div for you to be able to drop something there (below, I just set the style to make the div take up the entire viewport). Putting this all together using jquery:

<script>
$('#dropbox')
    .css('width', '100%')
    .css('height', '100vh')
    .on('dragover', function(e) {
        console.log('in the box');
        e.preventDefault();
    })
    .on('drop', function(e) {
        console.log(e.originalEvent.dataTransfer.getData("text"));
        e.preventDefault();
    });  
</script>

First, it's a good idea to wrap your DOM-manipulating code in a ready call, so that the page is ready before you start manipulating it. See this link for more details: https://learn.jquery./using-jquery-core/document-ready/

Then, this code should work:

var dropstr;
$( document ).ready(function() {
    $('#dropbox').on('drop', function(e) {
        e.originalEvent.dataTransfer.items[0].getAsString(function(str)
        {
            dropstr=str; 
        })

    });
});

The dataTransfer API is a bit involved, but you can find more details here: https://developer.mozilla/en-US/docs/Web/API/DataTransfer