如何抓住div移動鼠標？

Question

JSFiddle code

我想從div中移動距離20px範圍內的鼠標指針時用藍線佔據div。只有鼠標指針位於該div上時，我才能用藍線獲得div。基本上，使用鼠標指針選擇div是很困難的，因爲div寬度只有1px，不能改變。

我正在執行下面的代碼，但仍然無法抓住離鼠標指針右邊或左邊20px的div。

注意：上面提到的div表示帶有藍線的div，而不是灰色框。

//Div positions and their id has been added to map 
var hmap = new Map(); 
hmap.set("hguide1",96); 
hmap.set("hguide2",284); 
hmap.set("hguide3",520); 

var vmap = new Map(); 
vmap.set("vguide1", 96); 
vmap.set("vguide2",384); 
vmap.set("vguide3",720); 

$(document).mousemove(function(e){ 
    var mx = e.pageX, my = e.pageY; 
    //Catch hold of vertical div's 
    for (var [key, value] of vmap) { 
    var dist = value - mx; 
    if(dist >= -20 && dist <= 20){ 
     $('.'+key).css({width: '10px', left:}); 
    } else { 
     $('.'+key).css({width: '1px'}); 
    } 
    } 
    //Catch hold of horizontal div's 
    for (var [key, value] of hmap) { 
    var dist = value - my; 
    if(dist >= -20 && dist <= 20){ 
     $('.'+key).css({height: '10px'}); 
    } else { 
     $('.'+key).css({height: '1px'}); 
    } 
    } 
}); 

我在尋找一個方式通過，我能趕上DIV，這是從左邊或鼠標指針的右側20像素而去按住並拖動它。

任何建議非常感謝。

Answer 1

您可以使用CSS樣式來獲得此結果。我們將:: after大小設置爲左側或頂部的100％ - 20px，具體取決於水平線還是垂直線。然後，根據我們是調整行還是列，將寬度或高度設置爲100％或緩衝區大小（40px，因爲我們希望在行的任何一邊爲20px）。

我意識到這聽起來有點混亂，所以我會把它們分開。這裏的垂直：

.vguide1,.vguide2,.vguide3 { 
    border-left: 1px solid blue; 
    padding-bottom: 20px; 
    position: absolute; 
    width:1px; 
    height:650px; 
} 
.vguide1::after,.vguide2::after,.vguide3::after { 
    content: ''; 
    position: absolute; 
    left: calc(50% - 20px); 
    width: 40px; 
    height: 100%; 
    cursor: col-resize; 


} 

水平：

.hguide1,.hguide2,.hguide3 { 
    padding-right: 20px; 
    position: absolute; 
    width:850px; 
    height:1px; 
    border-top: 1px solid blue; 

} 
.hguide1::after,.hguide2::after,.hguide3::after { 
    content: ''; 
    position: absolute; 
    top: calc(50% - 20px); 
    width: 100%; 
    height: 40px; 
    cursor: row-resize; 

} 

用陰影來顯示擊中格：https://jsfiddle.net/Ljxpj5bt/27/

沒有擊中格：https://jsfiddle.net/Ljxpj5bt/28/