Question

当我将鼠标指针移动到与div相差20px的距离时，我试图用蓝线抓住div。只有当鼠标指针在该div上时，我才能用蓝线抓住div。基本上，使用mouser指针选择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的方法，它距离鼠标指针的左侧或右侧20px，然后拖动它。

任何建议都非常感谢。

Answer 1

您可以使用CSS样式来获得此结果。我们将:: after size设置为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/

如何在mousemove上抓住div？

1 个答案: