Javascript：更改拖动光标

如何解决Javascript：更改拖动光标

我有包含 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);
}

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;
}

解决方法

我尝试了几件事，但无法想出答案。虽然，您可以使用替代 here 来获得所需的效果。我认为它也依赖于浏览器/平台。所以，它不会是一种通用的东西。

从我在互联网上看到的情况来看，他们提供了一些选项来做到这一点。我曾在我的系统中尝试过这些东西，但这似乎不起作用。总有一些替代方案可以做同样的事情。正如您在上面的链接中看到的，他们还实现了拖放功能，而不使用可拖动属性。

还有一个 draggable module in jQuery，你可以检查一下。

附言我使用的是 Linux 系统，所以其他操作系统之间可能也存在一些差异。这就是为什么我说这不是一个好的/通用的方式。

Javascript：更改拖动光标

如何解决Javascript：更改拖动光标

解决方法

相关推荐