javascript - 如何使用 html5 event.dataTransfer 传输整个元素？

Question

我想记住或获取当前拖动元素的数据。这就是我所做的:

$('.source_element').on('dragstart', function(e){
   e.originalEvent.dataTransfer.setData("source", this); 
});

$('.destination').on('drop', function(e){
   var source = e.originalEvent.dataTransfer.getData('source');
   console.log(source);
   console.log(source.className);
   console.log($(source));
   $(this).html($(source).html());

   e.preventDefault();
});

第一个 console.log 将 [object HTMLDivElement] 显示为字符串，而不是对象，第二个 undefined，第三个抛出错误。

所以我怀疑 dataTransfer.setData 只接受数据作为字符串，不允许对象。如果是这样，你如何解决这个问题，我如何在不知道其具体 ID 的情况下记住正在拖动的是哪个元素？

Answer 1

只需使用一些字符串来唯一标识元素，例如为每个元素指定一个 id 或数据属性

$('.source_element').on('dragstart', function(e){
   var id = 'drag-'+(new Date()).getTime();
   this.id = id;
   //$(this).attr('data-drag', id);
   e.originalEvent.dataTransfer.setData("source", id); 
});

$('.destination').on('drop', function(e){
   var source = e.originalEvent.dataTransfer.getData('source');
   console.log(source);
   console.log($('#'+source));
   $(this).html($('#'+source).html());
   //console.log($('[data-id="'+source+'"]'));
   //$(this).html($('[data-id="'+source+'"]').html());

   e.preventDefault();
});