如何删除 PNG 的重影图像？ （或鬼像的白色背景）

Question

I am a Beginner Developer and am working on a personal chess project. I just learned how to create a drag and drop system, maybe I could learn other ways of doing It but I would like to know if there's any way to 'remove' the white background. I don't know really how this should work but I had some ideas:

1. Somehow remove the white background of the ghost image.

2. Substitute the ghost image with the actual image being dragged.

3. Or just entirely remove the ghost image while dragging since we can see the piece in each square when you are dragging over it.

If it's possible to do any of these solutions it would be good!

Here is the link for the project I am working: https://codepen.io/ThalisonAmaral/full/qBYZmZq You will be probably dealing with the function dragstart(); `

 function dragstart() {
        squaresDrop.forEach(square => square.classList.add('highlight'))
        this.classList.add('is-dragging');  
    }

`

The Drag and Drop is at the end of the Js Code

Since I don't understand what I am dealing with exactly. I searched for some possible solutions but I couldn't get any result with DataTransfer.setDragImage().

Which I think it should be using for replacing the ghost image with an actual image but I would need to check each piece, It doesn't seem to be the way but I could be wrong.

Answer 1

The easiest way of doing this is by setting the opactiy of the image to 0 when you start dragging it and setting it back to 1 when dropping.

I added this.style.opacity = 0; on line 105 and this.style.opacity = 1; on line 11

Hopefully this is what you want!

 /* ------- BOARD GENERATOR -------*/ const body = document.body; const $addClass = (element,className) => { element.classList.add(className); }; const $setId = (element,idName)=>{element.setAttribute('id',idName)} const $createSquare = (element,squareColor,board)=> { element = document.createElement('div'); $addClass(element,squareColor) $addClass(element,'square'); board.appendChild(element) }; const $createBoardBorder = (where) => { var board = document.createElement('div'); $addClass(board,'board'); where.appendChild(board) } var coordinates = [ 'a8','b8','c8','d8','e8','f8','g8','h8', 'a7','b7','c7','d7','e7','f7','g7','h7', 'a6','b6','c6','d6','e6','f6','g6','h6', 'a5','b5','c5','d5','e5','f5','g5','h5', 'a4','b4','c4','d4','e4','f4','g4','h4', 'a3','b3','c3','d3','e3','f3','g3','h3', 'a2','b2','c2','d2','e2','f2','g2','h2', 'a1','b1','c1','d1','e1','f1','g1','h1' ]; function createBoard(size,lightColor,darkColor,where){ /* CREATING A DIV WITH A CLASS 'board' */ $createBoardBorder(where); /* SELECTING THE BOARD */ var board = document.querySelector('.board'); /* GENERATING ALL THE SQUARES AND PUTTING THEM INTO THE BOARD */ var light = 'light'; var dark = 'dark'; for (let i = 0; i < 32; i++) { $createSquare(coordinates,light,board); $createSquare(coordinates,dark,board); if((i+1)%4 === 0 ){ var x = light; light = dark; dark = x; } } const squares = document.querySelectorAll('.square'); /*PUTTING ALL THE IDS IN EACH SQUARE */ for (let i = 0; i < squares.length; i++) { $setId(squares[i],coordinates[i]) } // ----- BOARD STYLE ----- const lightSquares = document.querySelectorAll('.light'); const darkSquares = document.querySelectorAll('.dark'); board.style.width = size+'px'; board.style.height = size+'px'; lightSquares.forEach((value,index)=>{ value.style.height = size/8+'px'; value.style.width = size/8+'px'; value.style.backgroundColor = lightColor; darkSquares[index].style.height = size/8+'px'; darkSquares[index].style.width = size/8+'px'; darkSquares[index].style.backgroundColor = darkColor; }) } const boardzone = document.getElementById('boardzone'); createBoard(500,'white','rgb(64, 100, 145)',boardzone); /*-------- PIECE RENDER --------*/ const king = document.createElement('img'); king.setAttribute('class','piece'); king.src = "https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png"; e1.appendChild(king) /*-------- DRAG AND DROP --------*/ var audio = new Audio('sound.wav'); var pieces = document.querySelectorAll('.piece'); console.log(pieces); var squaresDrop = document.querySelectorAll('.square'); pieceCheck = ()=> { var pieces = document.querySelectorAll('.piece'); pieces.forEach(piece=>{ piece.addEventListener('dragstart',dragstart) piece.addEventListener('drag',drag) piece.addEventListener('dragend',dragend) function dragstart() { squaresDrop.forEach(square => square.classList.add('highlight')) this.style.opacity = 0; this.classList.add('is-dragging'); } function drag(){ } function dragend(){ this.style.opacity = 1; this.classList.remove('is-dragging'); audio.play(); } })} pieceCheck(); //Checking if a new piece was added in the board squaresDrop.forEach(square=>{ square.addEventListener('dragenter',dragenter); square.addEventListener('dragover',dragover); square.addEventListener('dragleave',dragleave); square.addEventListener('drop',drop); function dragenter(){ } function dragover(){ this.classList.add('over') //Get dragging piece const draggedPiece = document.querySelector('.is-dragging'); this.appendChild(draggedPiece); } function dragleave(){ log('Leaving') this.classList.remove('over') } function drop(){ } })

 body { background-color:rgb(15,15,15); }.board { display: grid; grid-template-columns: repeat(8, 1fr); } #boardzone{ margin: 60px auto; display: flex; justify-content:center; } /* Drag and Drop CSS */.piece { height: 100%; user-select: none; }.highlight { background-color:rgba(14,14,14,0.2); }.is-dragging { cursor:move; opacity: 0.3; transform: translate(0, 0); }.over{ background-color: rgba(173, 240, 118, 0.315); }

 <div id='boardzone'></div>