Search code examples
javascripthtmldrag-and-dropdraggabledrag

Javascript: Change Dragging Cursor

I have board element which contains 25 tiles arranged in grid layout. I want it so that the user can drag the tile element, but can not see it being dragged. It's kind of a game. So I managed to remove the ghost image while dragging, but the issue now is the cursor. I am not able to change the dragging cursor to a normal cursor. Here is what the webpage looks like:

My Webpage

Here, is the cursor that is showing while I drag:

Drag Cursor

Here, is the cursor that I want when I drag (pointer cursor):

Pointer Cursor

Here is my javascript code:

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) {
    
}

My 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>

Here's the CSS file:

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

  • I have tried couple of things but couldn't come up with an answer. Although, there is an alternative here you can use to get your desired effect. I think it is browser/platform dependent also. So, it is not going to be a generic kind of thing.

    From what I have seen on internet, they have given some options to do this. I had tried those things in my system but that doesn't seems to work. There are always some alternatives out there to do same things. As you can see in the above link, they also have implemented the drag and drop feature without using the draggable attribute.

    There is also one draggable module in jQuery, you can check that.

    P.S. I'm using Linux system, so maybe there also some difference across other OS. That's why I said it won't be a good/generic way.