拖拽div至浏览器外桌面时自定义光标及创建新窗口的实现问题

你遇到的问题核心是：浏览器默认会检测拖拽的数据类型，当没有设置合法的拖拽数据时，拖到外部区域就会显示禁止光标。只需要在dragstart事件里给拖拽操作添加一个浏览器认可的数据类型，就能让光标显示为允许的样式，同时不影响你原本创建新窗口的逻辑。

修改后的代码如下：

let dragged = null;
let dropTarget = null;

document.addEventListener("dragstart", e => {
  dragged = e.target;
  // 添加合法拖拽数据，让浏览器识别为有效拖拽
  e.dataTransfer.setData('text/plain', dragged.textContent);
  // 指定拖拽操作类型，对应显示合适光标
  e.dataTransfer.effectAllowed = 'copy';
});

document.addEventListener("dragend", e => {
  if (dropTarget == null) {
    const w = window.open("", "_blank", `height=200,width=200,left=${e.screenX},top=${e.screenY},toolbar=0,location=0,menubar=0`);
    w.document.body.appendChild(dragged);
  }
  // 重置状态变量
  dragged = null;
  dropTarget = null;
});

document.addEventListener("dragenter", e => dropTarget = e.target);
document.addEventListener("dragleave", e => {
  if (dropTarget == e.target) {
    dropTarget = null;
  }
});

<div draggable="true" style="padding: 10px; border: 1px solid #ccc; cursor: grab;">Draggable div</div>

关键说明： #

• e.dataTransfer.setData('text/plain', ...)：绑定纯文本类型的拖拽数据，这是系统和浏览器都认可的拖拽类型，浏览器会因此判定拖拽合法，光标自动切换为允许样式。
• e.dataTransfer.effectAllowed = 'copy'：指定拖拽操作类型为“复制”，浏览器会匹配对应光标；也可以通过CSS给draggable元素设置cursor: grab优化初始拖拽时的光标体验。
• 原有dragend逻辑保持不变，只要检测到没有内部放置目标，就创建新窗口并移动目标div。

这样修改后，拖拽到浏览器外时光标会显示为允许样式，同时正常触发创建新窗口的逻辑。

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