Javascript: 更改拖动光标

Question

我有一个棋盘元素，其中包含以网格布局排列的 25 个图块。我想要它以便用户可以拖动 tile 元素，但看不到它被拖动。这是一种游戏。所以我设法在拖动时删除了重影，但现在的问题是光标。我无法将拖动光标更改为普通光标。网页如下所示：

这里是我拖动时显示的光标：

这里是我拖动时想要的光标（指针光标）：

这是我的 javascript 代码：

let tileMap = 
[
    ["00","10","20","30","40"],
    ["01","11","21","31","41"],
    ["02","12","22","32","42"],
    ["03","13","23","33","43"],
    ["04","14","24","34","44"]
]

tileMap.forEach(tileSet => tileSet.forEach(tileID => {

    //Creating tile element
    let tile = document.createElement('div');
    tile.classList.add('tile')
    tile.id = tileID;
    tile.draggable = true;

    //Adding mouse action listeners to the tile element
    tile.ondragstart = e => handleDragStart(e);
    tile.ondragover = e => handleDragOver(e);
    tile.ondragend = e => handleDragEnd(e);

    //Adding the tile element to the board
    document.querySelector('#board').appendChild(tile);
}))

function handleDragOver(e) {
    
}

function handleDragStart(e) {
    let ghostImage = document.createElement('img');
    ghostImage.src = '';
    ghostImage.alt = '';
    e.dataTransfer.setDragImage(ghostImage, 0, 0);
}

function handleDragEnd(e) {
    
}

我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flow Free (vanilla-version)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrapper">
    <div id="board">

    </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

这是 CSS 文件：

body {
    background-color: darkslategray;
    padding: 0; margin: 0;
}
#wrapper {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100vw; height: 100vh;
}
#board {
    aspect-ratio: 1/1;
    width: 80vmin;
    background-color: aliceblue;

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);

    border: 5px solid aliceblue;
}
.tile {
    position: relative;
    background-color: darkcyan;
    border: 2px solid aliceblue;
    overflow: hidden;
}

.stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
}

.connector-direct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(90deg);
    width: 50%;
    height: 100%;
}
.connector-turn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.connector-turn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: darkcyan;
    width: 25%;
    height: 25%;
}
.connector-turn::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 75%;
    height: 75%;
    border-right: 100vw solid darkcyan;
    border-bottom: 100vh solid darkcyan;
}

Answer 1

我已经尝试了几件事，但无法得出答案。不过，您可以使用另一种方法 here 来获得所需的效果。我认为它也依赖于 browser/platform。所以，它不会是一种通用的东西。

根据我在互联网上看到的，他们提供了一些选项来执行此操作。我已经在我的系统中尝试过这些东西，但那似乎不起作用。总是有一些替代方案可以做同样的事情。正如你在上面看到的link，他们也实现了拖放功能而不使用 draggable 属性。

还有一个draggable module in jQuery，你可以看看

P.S。我正在使用 Linux 系统，所以可能与其他 OS 系统也有一些差异。这就是为什么我说这不会是 good/generic 方式。

Javascript: 更改拖动光标

Javascript: Change Dragging Cursor

html

javascript

drag-and-drop

draggable

drag