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

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

$('.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 htmldevelment]

显示为字符串，而不是对象，第二个

未定义

，第三个抛出错误

---

因此我怀疑

dataTransfer.setData

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

只需使用一些字符串来唯一地标识元素，比如给每个元素一个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();
});

---

我不是globals的粉丝，但有时他们适合这个问题。如果希望能够移动包含某些数据的HTMLElement，请尝试以下操作：

window.dragDepo = {};
const dragID = "unique_dragging_name";
sourceEl.addEventListener("dragstart", (event) => {
  window.dragDepo[dragID] = { el: sourceEl, origin: "where it was before" }
  event.dataTransfer.setData("text/plain", dragID);
});

// clear global data asap
sourceEl.addEventListener("dragend", (event) => window.dragDepo[dragID] = undefined);

---

您还可以通过将字符串化JSON对象插入dataTransfer.setData部分来实现这一点：

添加HTML元素（使用outerHTML使其成为字符串）：

在上面，我使用两个键创建了

dragData

对象-一个是

元素

，另一个是

移动悬停

，它只是拖动事件的名称，因此您可以识别它

然后在删除时对其进行JSON解析：

var data = e.dataTransfer.getData("text");
var dragData = JSON.parse(data)
var element = dragData.element

var dragDataElement = document.createElement('div')
dragDataElement.innerHTML = dragData.element
originalElement = dragDataElement.firstChild

不确定是否对可以传递的文本长度有限制，但这对我来说是有效的。但主要的问题是，在使用新字符串时，没有对原始HTML元素的引用

删除时，您必须重新创建HTML节点：

var data = e.dataTransfer.getData("text");
var dragData = JSON.parse(data)
var element = dragData.element

var dragDataElement = document.createElement('div')
dragDataElement.innerHTML = dragData.element
originalElement = dragDataElement.firstChild

---

在不知道其特定ID的情况下

您可以在

dragstart

中轻松获取其ID，然后在

drop

中使用它来获取元素。@Musa当拖动元素甚至没有ID时，您如何在dragstart中获取其ID？@Musa我想这可以工作，但不是很整洁。我选择的最后一种方法这工作得很好，但我也将拖拽的HTML节点附加到全局窗口对象上，正如上面Seph Reed的回答所建议的那样..结果简单得多