4

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

$('.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 的情况下记住哪个元素被拖动？

4

3 回答 3

3

只需使用一些字符串来唯一标识元素，例如给每个元素一个 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();
});
于 2013-06-09T18:14:03.143 回答
3

我不是全局变量的粉丝，但有时它们适合这个问题。如果您希望能够使用一些数据移动 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);

. 

destinationEl.addEventListener("drop", (event) => {
  const dragID = event.dataTransfer.getData("text/plain");
  dragData = window.dragDepo[dragID];
});
于 2018-10-25T18:18:48.867 回答
0

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

添加 HTML 元素（使用 outerHTML，所以它是一个字符串）：

var dragData = {element:originalElement.outerHTML, type:'move-hovered'}
dragData = JSON.stringify(dragData);
event.dataTransfer.setData("text/plain", dragData);

在上面，我dragData使用 2 个键创建对象 - 一个是element，另一个move-hovered是 ，只是拖动事件的名称，因此您可以识别它。

然后 JSON 在丢弃时对其进行解析：

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

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

并且您必须在删除时重新创建 HTML 节点：

var dragDataElement = document.createElement('div')
dragDataElement.innerHTML = dragData.element
originalElement = dragDataElement.firstChild
于 2021-02-17T11:30:46.927 回答