实现在图片上画很多个可拖拽的div（二）完-一一网

这是我参与新手入门的第2篇文章

序言

接着上篇的继续来进行我的需求完善。
上篇地址 https://juejin.cn/post/6981320873730899975

我画完一个可拖拽可收缩的框框后，领导的新指示又来了，
他想要位置要用键盘进行微调，因为有的框框被缩的太小时，鼠标拖得不准，不好调整。

嗯。我默默点头： 好的。
但是这篇，我还是要先接上篇的继续，最后再完成这个新的需求
复制代码

第四步给每个框框绑定事件（避免图上有多个框框时拖动修改时不知道在调整哪个框框）

我在每次右键新建一个框时，都会初始化一个位置，并在全局的变量 mydata 里面push一个相关信息，在组件中的div小框是循环处理的如图我的div是这样的循环

// 相关的获取位置的函数

getSpanStyle(item, index) {
    return {
      width: `${item.w}px`,
      height: `${item.h}px`,
      top: `${item.y}px`,
      left: `${item.x}px`
  }
}
复制代码

绑定单个的div的事件的方式，我是在点击时做了处理，获取到当前的点击的div是哪个框框，
绑定了一个click事件 init() 这个函数主要做的事情就是获得到当前点击修改的是哪个框框，然后将之前的鼠标，键盘事件绑定给这个点击的div（好像做的有点傻，但是我的大脑只能想到这个了）

只截取部分代码：

第五步增加键盘事件控制div的大小缩放(新的需求修改)

我修改一下我的绑定的事件，之前只监听了键盘的code码是38（也就是w）的事件，我自己内设在长按w时我就认为他开始编辑这个div了，所以在这增加了对键盘的上下左右的监听，在w按住后，给全局变量edit设置为true，然后在这时点击键盘的上下左右后依次增加或者减少div的大小，这是我的大致思路。具体的实现，就是一些简单事件的拼接，拼接时要注意，有一个问题，键盘的上下左右有默认事件，这时要给禁止掉。

实现这个操作的关键代码如下：

 if(event && (event.keyCode==40 || event.keyCode==37 || event.keyCode==39 || event.keyCode==38)){ //下,左，右， 上
                  
      var keyValue = event.keyCode
                   // console.log(event, keyValue)
      if(edit) {
          const top = Number(rec.style.top.split('px')[0])
          const left = Number(rec.style.left.split('px')[0])
          var difTop = ~~top
          var difLeft = left
          if(keyValue == 40) { //下
              difTop += 1
          } else if(keyValue == 38){ // 上
              difTop -= 1
          } else if(keyValue == 37) {//左
              difLeft -= 1
          } else if(keyValue == 39) { //右
             difLeft += 1
          }
          rec.style.top = difTop+ 'px'
          rec.style.left = difLeft+ 'px'
          this.mydata[itemIndex].x = difLeft
          this.mydata[itemIndex].y = difTop
      }
    }
复制代码