Ghost image on drag and drop showing siblings

Question

When I drag a div, the sibling at the bottom is showing inside the ghost image.

Illustration :

How to remove the next sibling, here the span "Hello" this one ?

I use Solidjs, and native js drag and drop.

Each component is draggable and droppable. But a component cannot be drag inside itself or its children.

I listed the different properties and events I use for each component :

  const onDrop: main.Attributes['onDrop'] = (event) => {
    event.stopPropagation();
    removeClass(parent, STRINGS.DROP_CLASS);
    if (isDragging()) {
      setView({ parent });
    } else {
      createView({ parent });
    }
  };

  const onDragOver: main.Attributes['onDragOver'] = (event) => {
    event.preventDefault();
    event.stopPropagation();
    // event.currentTarget.style.cursor = 'dragging';
  };

  const onDragEnter: main.Attributes['onDragEnter'] = (event) => {
    event.preventDefault();
    event.stopPropagation();
    // event.currentTarget.style.cursor = 'dragging';
    addClass(parent, STRINGS.DROP_CLASS);
  };

  const onDragLeave: main.Attributes['onDragLeave'] = (event) => {
    event.preventDefault();
    event.stopPropagation();
    removeClass(parent, STRINGS.DROP_CLASS);
  };

const draggable = true;
  const setClass = partialCall(setAttribute, id, 'class');
  const _backClass =
    '!opacity-50 !scale-90 !origin-left !transition !duration-300 !ease-out';
  const over = STRINGS.SHOW_BORDER;

  // #region Events
  const onDragStart: main.Attributes['onDragStart'] = (event) => {
    setClass(`${classe} ${STRINGS.DRAG_CLASS}`);
    event.stopPropagation();
    (event.dataTransfer as DataTransfer).effectAllowed = 'uninitialized';
    // event.currentTarget.style.cursor = 'dragging';
    if (dragOnly) {
      prepareForCreation({ classe, component, ..._props });
    } else {
      startDrag({ id });
    }
    setTimeout(() => {
      if (dragOnly) {
        setClass(`${cl} ${_backClass}`);
      } else {
        setClass(`${classe} ${_backClass}`);
      }
    }, 5);
  };

  const onMouseEnter: main.Attributes['onMouseEnter'] = (event) => {
    event.stopPropagation();

    !dragOnly && recursiveHoverClass(id);
  };

  const onMouseOver: main.Attributes['onMouseOver'] = (event) => {
    event.stopPropagation();
    !dragOnly && recursiveHoverClass(id);
  };

  const onMouseLeave: main.Attributes['onMouseLeave'] = () => {
    removeClass(id, over);
  };

  const onDragEnd: main.Attributes['onDragEnd'] = () => {
    setClass(dragOnly ? cl : classe);
    stopDrag();
  };

Answer 1

In its current condition your code is hard to reproduce because components are missing, you've posted event handlers only.

If it works for you, you can use solid-dnd, a lightweight and extensible drag and drop library for Solid JS: https://github.com/thisbeyond/solid-dnd