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

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

前言

突然有一天，领导跟我说，想要自己在图片上画框框做标注
（用户可以无限添加很多个框框，并调整框框的大小和框框的位置），
哈，啊， 我一脸迷茫
嗯，但是，这是领导要的，我就得去做，不是吗？（具体的内部需求不细说咯）
听着这个需求，我大脑一转，咦，我知道，我好像刚开始学习前端时写过一个原生js的拖拽？
瞬间觉得，嗯，我可以划水了，就用那个改成vue组件就交差好了。。

。。
经历一段时间，我找到了那段代码，然而，他不能满足我现在的需求，
诶，划水梦想泡汤，开始老老实实的自己撸代码。
复制代码

第一步：实现一个框框的可拖拽

第一步很简单，我先在一个vue组件中画了一个div，给了他一个id，利用之前写的拖拽复制过来。
实现拖拽主要使用的方法：

1. onmousedown 鼠标按下事件
2. onmousemove 鼠标移动事件
3. onmouseup 鼠标移开事件
复制代码

主要的逻辑很简单：有一个全局变量down，在鼠标按下时down = true, 鼠标在移动时进行判断down是否为true，为true时div的坐标跟着鼠标移动，当鼠标移开，down置为false。

这是拖拽一个div的基本操作，这一步很简单的哟呢。

第二步：实现一个框框的收缩

这第二步，其实也不难哟。但是要想清楚，避免一会脑袋乱掉。
div的收缩我没有像很多网页上的一样，在右下角进行鼠标收缩（可能是我有点懒惰了，不想那么麻烦）。我的div收缩用的是键盘事件，当用户长按‘W’键时，进行鼠标的滚轮的滚动进行收缩div 的大小。这里要注意的是收缩时，div的位置要以中心点进行变化。

实现这一步收缩主要使用的方法：

1. addEventListener  监听鼠标滚轮
2. onkeydown 键盘按键 主要是 keyCode 为 87 时
3. onkeyup 键盘松开 主要是 keyCode 为 87 时 的松开事件
复制代码

第三步：实现画多个框框

这一步，我用的是右键的方式新建和删除div。主要是为了避免我的背景图上有其他乱七八糟的按钮，采用右键的方式给出这个操作。

实现这一步主要使用了一个vue插件：

  vue中的一个右键插件 contextmenu 
复制代码

contextmenu 插件库在vue中的使用，我是在随心搜了一个教程，安装引用了一下。可以参考 github.com/Francecil/v…

部分代码(未放methods，后面会整理所有代码放出)：

<div class="image-wraps" ref="myedit">
       <div
      class="myedit-span"
       v-for="(item, index) in mydata"
      :key="index"
      :style="getSpanStyle(item, index)"
      :id="'rec'+ index"
      @click="init(index)"
      @contextmenu.prevent="onContextmenu(item, $event)"
    >
    <div class="name-span" :style="getSpanStyle(item, index, true)">
    {{index}}
    </div>
</div>

</div>

// 这是 右键菜单的组件 
<div class="myMenu" v-show="mymenu.current" :style="mymenu.style">
            <el-button @click="newMark()" type="primary"  size="small">新建</el-button>
            <el-button type="danger" @click="deleteItem" size="small">删除</el-button>
             </div>
复制代码

未完待续。。。