Firefox拖拽元素异常：DIV含子元素时触发URL加载问题

嘿，我碰到过类似的拖拽行为异常问题，帮你捋清楚根源和修复方案：

问题出在哪？ #

你的drop函数里的判断逻辑搞反了方向：
当div1已经有p子元素时，你拖拽到div的空白区域，ev.target其实就是div1本身，这时候$(ev.target).children().is('p')会返回true，代码就进入了第一个分支，没有执行ev.preventDefault()。而浏览器对于文本类拖拽有个默认行为——尝试导航到拖拽内容对应的URL，你在drag函数里把dataTransfer设置成了p元素的ID，所以浏览器就会尝试加载以这个ID为路径的地址，这就是你看到的异常。

修复后的代码 #

先把JavaScript代码改成这样：

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

function drag(ev) { 
  ev.dataTransfer.setData("text", ev.target.id); 
}

function drop(ev) { 
  // 先阻止浏览器默认拖拽行为，从根源避免导航
  ev.preventDefault();
  
  // 只有当拖拽目标是已有的p元素时，才跳过放置（可根据需求调整逻辑）
  if (ev.target.tagName.toLowerCase() === 'p') {
    return;
  }
  
  // 确保找到正确的放置容器（防止未来元素嵌套导致的目标错误）
  let dropContainer = ev.target.id === 'div1' ? ev.target : ev.target.closest('#div1');
  
  const data = ev.dataTransfer.getData("text"); 
  dropContainer.appendChild(document.getElementById(data).cloneNode(true)); 
}

HTML部分可以保持原样不变。

为什么这样改？ #

• 强制调用ev.preventDefault()：这是最关键的一步，直接阻止浏览器的默认拖拽导航行为，不管什么情况都先把这个默认行为掐掉。
• 修正判断逻辑：现在判断的是触发drop事件的是不是p元素，而不是容器有没有p子元素。只有当你把内容拖拽到已有的p上时才跳过放置，拖拽到div空白区域时正常执行克隆逻辑。
• 添加容器容错逻辑：用closest('#div1')确保即使未来你的p元素里有子节点（比如span），拖拽到子节点上时也能正确找到div容器，避免放置错误。

你直接替换原来的JS代码，在Firefox里测试一下，应该就能解决这个异常导航的问题了。

内容的提问来源于stack exchange，提问作者Rdngbbt ssgtx