Question

我想知道如何获取drop事件的文本值。这似乎是一个简单的问题，但令人惊讶的是我无法找到有效的答案。

下面的演示

<script src="https://ajax.googleapis.com/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>

Answer 1

首先，将DOM操作代码包装在一个就绪调用中是一个好主意，这样在开始操作之前页面就已准备就绪。有关详细信息，请参阅此链接：https://learn.jquery.com/using-jquery-core/document-ready/

然后，此代码应该有效：

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

    });
});

dataTransfer API有点涉及，但您可以在此处找到更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

Answer 2

看起来几乎快要用完了，但是由于您使用的是jQuery，因此需要按以下方式访问Mozilla's example中使用的原始事件：

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

上面的链接还显示了如何防止浏览器将文本当作URL跟踪（通过同时禁用'dragover'和'drop'的默认行为）。您还需要确保div中有空间，以便您可以在其中放置某些东西（下面，我只是设置样式以使div占据整个视口）。使用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>

Javascript：如何获取drop事件的文本值？

2 个答案: