使用Jquery

Question

在dragstart上我试图将文字附加到拖动的图像上。这样我以后可以在drop方法中识别它：

 var drag = function(event){
    event.originalEvent.dataTransfer.setData('text', 'ww');

但不知何故，即使在附上文本后，我也无法再访问它了：它是undefinded

 event.originalEvent.dataTransfer.getData('text')

如何将信息附加到dataTransfer - 对象并稍后在drop - 事件中访问？谢谢

您可以试用此代码：

＆＃13;

＆＃13;

var allowDrop = function(ev) {
  ev.preventDefault();
};

var drop = function(ev) {
  var attached_text = ev.originalEvent.dataTransfer.getData("text"); 
  
  //HERE I TRY TO GET THE ATTACHED TEXT
  //ITS EMPTY
  $('#attach_1').text(attached_text);
};
  

var drag = function(event){
  event.originalEvent.dataTransfer.setData('text', 'ww');
		
  var attached_text  = (event.originalEvent.dataTransfer.getData('text'));
  
  //RIGHT AFTER I ATTACHED THE TEXT ITS NOT ACCESIBLE
  $('#attach_2').text(attached_text);
}


$('*[data-dragname="tree_icon_drag"]').on('drag', drag);

$('#drop').on('drop',  drop);
$('#drop').on('dragover', allowDrop);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="attach_1"></p>
<p id="attach_2"></p>
									
											
											<img src="http://agarwal.seas.upenn.edu/wp-content/uploads/2011/01/person_default_208x208-1.png" data-dragname="tree_icon_drag"/>
									

<div id="drop" style="background-color:red; width:300px; height:300px">
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在dragstart事件中设置数据，而不是drag事件

var dragstart = function(event){
  event.originalEvent.dataTransfer.setData('text', 'ww');
  var attached_text  = (event.originalEvent.dataTransfer.getData('text'));
  $('#attach_2').text(attached_text);  
};
$('*[data-dragname="tree_icon_drag"]').on('dragstart', dragstart);

演示

＆＃13;

＆＃13;

var allowDrop = function(ev) {
  ev.preventDefault();
};

var drop = function(ev) {
  var attached_text = ev.originalEvent.dataTransfer.getData("text"); 
  $('#attach_1').text(attached_text);
};

var drag = function(event){};
var dragstart = function(event){
  event.originalEvent.dataTransfer.setData('text', 'ww');
  var attached_text  = (event.originalEvent.dataTransfer.getData('text'));
  $('#attach_2').text(attached_text);  
};
$('*[data-dragname="tree_icon_drag"]')
    .on('drag', drag)
    .on('dragstart', dragstart);

$('#drop').on('drop',  drop)
          .on('dragover', allowDrop);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="attach_1"></p>
<p id="attach_2"></p>
<img src="http://agarwal.seas.upenn.edu/wp-content/uploads/2011/01/person_default_208x208-1.png" data-dragname="tree_icon_drag"/>
<div id="drop" style="background-color:red; width:300px; height:300px"></div>

＆＃13;

＆＃13;

＆＃13;