javascript - 如何在mousemove上获取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'});
     }
   }
});

我正在寻找一种方法，通过它我可以捕获距离鼠标指针左侧或右侧 20px 的 div，然后拖动它。

非常感谢任何建议。

Answer 1

您可以使用 CSS 样式来获得此结果。我们在左侧或顶部将::after 大小设置为 100% - 20px，具体取决于它是水平线还是垂直线。然后，根据我们调整的是行还是列，我们将宽度或高度设置为 100% 或缓冲区大小(40 像素，因为我们希望线的两侧各有 20 像素)。

我意识到这听起来有点困惑，所以我将它们分开。这是垂直的:

.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/