Styjun

Refer to code below. It creates a custom ghost image from the element being dragged by cloning it and hiding it underneath.

I wanted to do this the right way, i.e. use a custom react hook with useLayoutEffect to appendChild and removeChild but got stuck as setDataTransfer needs the event and also requires that the dom node is mounted.

Was going to post my useCustomDragImage hook attempt but decided to post the working function instead as it clearly demonstrates what I am trying to do.

 function handleDragStart(e) 

 const x, y, width, height = e.target.getBoundingClientRect();
 const clientX, clientY = e;

 const crt = e.target.cloneNode(e.target);
 crt.style.color = "white";
 crt.style.height = `$heightpx`;
 crt.style.width = `$widthpx`;
 crt.style.position = "absolute";
 crt.style.top = "0";
 crt.style.left = "0";
 crt.style.zIndex = "-1";
 e.target.parentNode.appendChild(crt);
 e.dataTransfer.setDragImage(crt, clientX - x, clientY - y);

 setTimeout(() => crt.parentNode.removeChild(crt), 0);

 

Edit: (my hook attempt)

import useLayoutEffect, useRef from 'react'

export default function useGhost() 

 const ref = useRef();
 const parentRef = useRef();

 useLayoutEffect(() => 
 const element = ref.current;
 const parent = parentRef.current;
 if (!element) return;
 console.log(parent)
 // parent.appendChild(element);
 return () => parent.removeChild(element);
 )


 function fromDomNode(e) 
 const x, y, width, height = e.target.getBoundingClientRect();
 const x: mx, y: my = e;
 console.log(mx, my)
 ref.current = e.target.cloneNode(e.target);
 parentRef.current = e.target.parentNode;
 console.log(parentRef.current)
 console.log(ref.current)
 const crt = ref.current;
 // crt.style.backgroundColor = "red";
 // crt.style.border = '1px dotted white';
 crt.style.color = "white";
 crt.style.height = `$heightpx`;
 crt.style.width = `$widthpx`;
 crt.style.position = "absolute";
 crt.style.top = "0";
 crt.style.left = "0";
 crt.style.zIndex = "-1";
 console.log(x, y, width, height)
 parentRef.current.appendChild(crt); <---- Should go in useLayoutEffect() but can't setDragImage without mounting it first! 
 e.dataTransfer.setDragImage(crt, mx - x, my - y); 

 // setTimeout(function () 
 // crt.parentNode.removeChild(crt);
 // , 1000);

 

 return fromDomNode;