从窗口外部删除事件仅在第二次触发

Question

我正在将一些文本从专有应用程序拖放到HTML<textarea>元素中。该软件无法复制粘贴;拖放是唯一的选择。但是，只需在 Word 中键入几行，然后将其拖到浏览器中，即可模拟拖放。

我的代码有一个jsfiddle。但是，当我第一次将一些行从程序拖到文本框中时，我返回了"未定义"。当我在不重新加载页面的情况下再次尝试时(当文本区域已经有内容时)，它工作得很好。

如何让它第一次工作？

Answer 1

你需要把这条线放

$('#return').html(dropstr);

在 getAsString 回调中。

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

#return{

border:1px solid black;
width: 200px;
height: 50px;
}

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

Answer 2

您在回调之外追加了回调，至少在您的情况下不需要回调本身。 小提琴

<div id="dropbox" contenteditable="true" id="dropbox">
<textarea></textarea>
</div>
<div id="return">
</div>

这是JS。

var dropstr;
$(document).ready(function() {
$('#dropbox').on('drop', function(e) {
var str = e.originalEvent.dataTransfer.getData('Text');
console.log(str);
$('#return').html(str);
});
});