我目前正在尝试在拖动对象时更改图标。我试图使用许多拖动事件来更改它，更改光标以在 JS 和 CSS 中动态抓取，但没有成功。最后，我阅读了很多文章，在这些文章中我发现了一些使用 dataTransfer 的想法，但也没有结果。您能否为我提供一个快速简单的提示，如何更改“抓取”的光标图标？
我在堆栈中搜索解决方案但没有结果。我正在测试拖动事件，dataTransfer，也没有结果。图标保持不变。
const draggableElement = document.getElementById("draggable");
draggableElement.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", "This is draggable");
// Change the cursor icon while dragging to 'grabbing'
draggableElement.style.cursor = 'grabbing';
});
draggableElement.addEventListener("dragend", () => {
// Reset the cursor icon after dragging ends
draggableElement.style.cursor = 'grab';
});#draggable {
width: 100px;
height: 100px;
background-color: lightblue;
cursor: grab;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Element</title>
</head>
<body>
<div id="draggable" draggable="true">Drag me</div>
</body>
</html>