Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello, i am trying to make a kanban board with vue 3 the problem is all packages depend on html-drag-and-drop API which makes the opacity of dragged element with opacity around .2 or .3 and i want it to be full opacity what is the best solution for that?
@crastycrap a workaround is hiding the drag image, you can do this by cloning the element being dragged using cloneNode then change its opacity to 0, the set it as dragimage using setDragImage
after this, clone another one and make it follow the mouse
@dacfabre ok i will try it thx
@CrastyCrap here i have made a quick javascript you can try
<!DOCTYPE HTML>
<html>
<head>
<style>
.dragdemo {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
background: rgb(0, 83, 128);
color: #efe;
}
</style>
</head>
<body>
<div id="dragster" class="dragdemo" draggable="true">draggable task</div>
</body>
<script>
document.getElementById("dragster").addEventListener("dragstart", function(e) {
var hideDragImage = this.cloneNode(true);
hideDragImage.id = "hideDragImage-hide"
var dragImage = this.cloneNode(true);
dragImage.id = "draggeimage";
dragImage.style.position = "absolute";
hideDragImage.style.opacity = 0;
document.body.appendChild(hideDragImage);
document.body.appendChild(dragImage);
e.dataTransfer.setDragImage(hideDragImage, 0, 0);
}, false);
document.getElementById("dragster").addEventListener("dragend", function(e) {
var hideDragImage = document.getElementById('hideDragImage-hide');
var dragImage = document.getElementById('draggeimage');
hideDragImage.remove()
dragImage.remove()
}, false);
document.getElementById("dragster").addEventListener("drag", (event) => {
dragImage = document.getElementById('draggeimage');
if(dragImage) {
dragImage.style.left = event.pageX + "px";
dragImage.style.top = event.pageY + "px";
}
})
</script>
</html>
@dacfabre Thx it's working
@dacfabre I tried something similar does seem to work on firefox.
Please or to participate in this conversation.