Hover effect only when dragging

Question

Is it possible to highlight a box when I drag a document over it? It should be highlighted only when

you hover over the element
you drag something
when you drag-leave it shouldn't be highlighted anymore

I use React + Typescript, but any CSS Tipps would help.

Right now it looks something like this:

import { useDragging } from '../../../common/useDragging';
    
const useStyles = makeStyles(
  theme => ({
    root: {
      '&.dragging, &:focus': {
        outline: `4px solid ${theme.palette.primary.main}50`,
        boxShadow: '0px 4px 12px rgba(131, 142, 158, 0.22)',
      },
    }
  })
);

chesterly · Answer

Maybe not exactly what you're searching for, but you can check the state of the dragged element like this:

let currentDroppable = null;
egg.onmousedown = function(event) {
  let shiftX = event.clientX - egg.getBoundingClientRect().left;
  let shiftY = event.clientY - egg.getBoundingClientRect().top;
  egg.style.position = 'absolute';
  egg.style.zIndex = 1000;
  document.body.append(egg);
  moveAt(event.pageX, event.pageY);

  function moveAt(pageX, pageY) {
    egg.style.left = pageX - shiftX + 'px';
    egg.style.top = pageY - shiftY + 'px';
  }

  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
    egg.hidden = true;
    let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
    egg.hidden = false;
    if (!elemBelow) return;
    let droppableBelow = elemBelow.closest('.droppable');
    if (currentDroppable != droppableBelow) {
      if (currentDroppable) {
        leaveDroppable(currentDroppable);
      }
      currentDroppable = droppableBelow;
      if (currentDroppable) {
        enterDroppable(currentDroppable);
      }
    }
  }
  document.addEventListener('mousemove', onMouseMove);
  egg.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    egg.onmouseup = null;
  };
};

function enterDroppable(elem) {
  elem.style.background = 'green';
}

function leaveDroppable(elem) {
  elem.style.background = '';
}
egg.ondragstart = function() {
  return false;
};

#nest {
  cursor: pointer;
  margin-bottom: 100px;
  width: 230px;
  height: 100px;
}

#egg {
  cursor: pointer;
  width: 80px;
  height: 80px;
}

Drag the egg:

Hover effect only when dragging

1 Answers