私はドラッグのようなものを作り、均一な正方形の画像を使用して、パズルのウェブサイトをドロップしようとしている、と私は彼らの<code><img></code>要素によって個々の画像をドラッグするドラッグコードを書いたhtml要素

Question

をドラッグしながら、MouseEnterイベントを検出します。

しかし、が付いた別の要素に<img>要素をドラッグしているうちに、マウスセンターイベントが発生しないことに気付きました。イメージをドラッグせずにマウスの上にマウスを移動すると、イベントは正常に発生します。

誰もがこの問題を解決する方法上の任意のアイデアを持っていますか？私の唯一の推測気圧は<img>要素がマウスを見てからリスナーをブロックしていることです。

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

問題は、マウスが常にポインタの下の画像ので.clipboardを置くことはありませんということです。

pointer-events:none;（旧式のブラウザではサポートされていません）を追加するのは、です。

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="http://i.stack.imgur.com/NghNQ.jpg" /> 
 
</div>

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