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

Javascript: How to get the text value of drop event?

本文关键字：事件 drop 文本 获取 何获取 Javascript      更新时间：2023-09-26

我想知道如何获取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>

看起来你几乎有is，但是由于你使用的是jQuery，Mozilla示例中使用的原始事件（例如）需要按如下方式访问：

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>

首先，最好将 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; 
        })
    });
});

数据传输 API 有点复杂，但您可以在此处找到更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

相关文章：