Detecting mouseenter event while dragging html element

Question

I'm trying to make a sort of drag and drop puzzle website using uniform square images, and I've written the drag code to drag individual images by their <img> element.

However I noticed that while dragging an <img> element over another element with addEventListener("mousenter", function () {//code};) attached, the mouseenter event doesn't fire. If I move my mouse over the element without dragging the image, the event fires as normal.

Does anyone have any ideas on how to fix this problem? My only guess atm is that the <img> element is blocking the listener from seeing the mouse.

var dragImg = document.querySelector(".images img");

dragImg.addEventListener("mousedown", function () {
  console.log("mousedown detected " + dragImg.clientHeight);
  dragImg.setAttribute("id", "drag");
  dragging = true;
});

dragImg.addEventListener("mousemove", function (event) {
  if (dragging) {
    dragImg.style.top = (event.clientY - dragImg.clientHeight/2) + "px";
    dragImg.style.left = (event.clientX - dragImg.clientWidth/2) + "px";
  }
});

dragImg.addEventListener("mouseup", function () {
  console.log("mouseup detected");
  dragging = false;
  //reset position if not in clipboard
  dragImg.removeAttribute("id");
  dragImg.style.top = "";
  dragImg.style.left = "";
});

//Clipboard behavior - This listener doesn't fire when dragging an img?
var clipboard = document.querySelector(".clipboard");
clipboard.addEventListener("mouseover", function () {
  if (dragging) {
    console.log("mouse entered clipboard!");
    clipboard.style.backgroundColor = "red";
  }
});

#drag {
    position: absolute;
}

Answer 1

The problem is that the mouse never hover the .clipboard because the image always below the pointer.

The simple solution is to add pointer-events:none; (not supported on older browsers).

var dragImg = document.querySelector(".images img");
var dragging = false;

dragImg.addEventListener("mousedown", function (event) {
  event.stopPropagation();
  console.log("mousedown detected " + dragImg.clientHeight);
  dragImg.setAttribute("id", "drag");
  dragging = true;

  document.addEventListener('mousedown', function documentMouseDown(){
    if (dragging) {
      dragImg.removeAttribute("id");
      dragging = false;

      document.removeEventListener('mousedown', documentMouseDown);
    }
  });
});

document.addEventListener("mousemove", function (event) {
  if (dragging) {
    dragImg.style.top = (event.clientY - dragImg.clientHeight/2) + "px";
    dragImg.style.left = (event.clientX - dragImg.clientWidth/2) + "px";
  }
});

dragImg.addEventListener("mouseup", function () {
  console.log("mouseup detected");
  dragging = false;
  //reset position if not in clipboard
  dragImg.removeAttribute("id");
  dragImg.style.top = "";
  dragImg.style.left = "";
});

//Clipboard behavior - This listener doesn't fire when dragging an img?
var clipboard = document.querySelector(".clipboard");
clipboard.addEventListener("mouseover", function () {
  if (dragging) {
    console.log("mouse entered clipboard!");
    clipboard.style.backgroundColor = "red";
  }
});

#drag {
  position: absolute;
  pointer-events:none;
}

.clipboard {
  width:200px;
  height:200px;
  background:green;
}

img {
  -webkit-user-select:none;
}

<div class="clipboard"></div>
<div class="images">
  <img src="https://i.sstatic.net/NghNQ.jpg" />
</div>

http://jsbin.com/hugewi/edit?html,css,js