拖放DOM创建的项目会返回'null'是因为在拖放操作中,通常会使用document.createElement()
方法来创建一个DOM元素,并将其作为拖动的副本。然后使用event.dataTransfer.setData()
方法将该副本数据传递给拖放目标。
但是,由于document.createElement()
方法只是创建了一个DOM元素,并没有将其添加到文档中,所以在没有将其插入到任何位置之前,尝试访问该元素会返回null
。
以下是解决该问题的一种可能的方法:
document.createElement()
方法来创建一个空的目标元素,例如<div>
或<span>
。appendChild()
方法将副本添加到目标元素中。dragover
和drop
事件。下面是一个示例代码片段,展示了如何处理拖放操作并避免返回'null'的问题:
// 创建一个空的目标元素
var targetElement = document.createElement('div');
// 处理拖放操作
targetElement.addEventListener('dragover', function(event) {
event.preventDefault();
});
targetElement.addEventListener('drop', function(event) {
event.preventDefault();
// 获取拖动的数据
var draggedData = event.dataTransfer.getData('text/plain');
// 创建拖动的副本并添加到目标元素中
var draggedElement = document.createElement('div');
draggedElement.textContent = draggedData;
targetElement.appendChild(draggedElement);
});
在上述示例中,我们创建了一个空的目标元素<div>
,并在dragover
和drop
事件处理函数中处理拖放操作。在drop
事件处理函数中,我们使用createElement()
方法创建一个带有拖动数据的副本,并通过appendChild()
方法将其添加到目标元素中。
关于云计算、IT互联网领域的名词词汇和推荐的腾讯云产品,根据提供的内容范围,无法与此问题直接关联。如果您有任何其他问题或需要进一步的帮助,请随时告诉我。
领取专属 10元无门槛券
手把手带您无忧上云