javascript/jqueryを使用して浮動アイコンを取得して、どのリスト項目の前にあるかを知ることができますか？

Question

私はこれらの大きな正方形のリスト項目の前にドラッグできるドラッグ可能なフローティングアイコンを持っています。私はアニメ-JSとなる浮遊アイコンは、それが目の前にあるリスト項目を把握できることをどのような方法があります

li{ 
    position: absolute; 
    z-index: -1; 
} 

とCSSのアイコンの後ろにリストを置きますか？

Answer 1

位置はgetBoundingClientRectで見つけることができます。これは、衝突検出を使用することによるものです。代わりに&のカーソルをドラッグして何かをしたい場合は、代わりにdrag and drop APIを使用してください。

function findElementBehindCursor(cursor, elements) { 
 
    var cursorBoundingBox = cursor.getBoundingClientRect(), 
 
    overlapped; 
 
    overlapped = [...elements].filter(e => isInside(e.getBoundingClientRect(), cursorBoundingBox)); 
 
    return overlapped; 
 
} 
 

 
function isInside(eBounds, cBounds) { 
 
    return eBounds.top < cBounds.top && eBounds.right > cBounds.right && eBounds.bottom > cBounds.bottom && eBounds.left < cBounds.left; 
 
} 
 

 
function runExample() { 
 
    var cursorEle = document.getElementById('draghandle'); 
 
    var liElements = document.getElementById('boxlist').children; 
 
    var results = findElementBehindCursor(cursorEle, liElements); 
 

 
    results.forEach(e => e.style.backgroundColor = 'green'); 
 
}

#wrapper { 
 
    position: relative; 
 
} 
 
#boxlist li { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    list-style: none; 
 
    margin: 2px; 
 
} 
 
#draghandle { 
 
    width: 10px; 
 
    height: 10px; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    background: yellow; 
 
    border: 1px solid white; 
 
} 
 
button { 
 
    background: blue; 
 
    color: #fff; 
 
}

<button onclick="runExample()">Click to find element behind yellow cursor</button> 
 
<div id="wrapper"> 
 
    <ul id="boxlist"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
    <div id="draghandle"> 
 
    </div> 
 
</div>