如何抓住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/