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

您是在回调之外追加的，至少在您的情况下，不需要回调本身。 fiddle

<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);
  });
});

来自外部窗口的放置事件仅第二次触发

2 个答案: