v-drag指令忽略margin导致的bug

• 抖音：https://v.douyin.com/DtaLEFK/

• B站：https://www.bilibili.com/video/BV1qV4y1k7Xu/

Demo预览：

https://sunzsh.github.io/vue-demos/#/drag

代码：

https://github.com/sunzsh/vue-el-demo/blob/master/src/main.js

https://github.com/sunzsh/vue-el-demo/blob/master/src/views/drag.vue

大家记得我之前分享这个v-drag

的指令吗

就是它可以让一个容器呀

或者他的父级容器呀

快速的实现这种

拖拽的效果像这样

然后呢前两天一小伙伴发现了一个bug

就是如果这个target呀

（就是这个拖拽的这个容器）

存在margin就会出现bug

我们来试一下哈

我们给这个容器加一个margin-top: 100吧

好我们再来试一下

现在这个位置

但是我一拖就变成这样了

我们来看一下怎么解决哈

我们找到这个指令代码在这里

其实这里边其他的代码不用看

最核心的就是在这他给.style.left

指定了一个变量

然后top指定了一个变量

其实这就是一个

定位绝对定位的位置

所以呢我们需要在这

把这或者把这个括号里的东西都给它

排除掉margin top和margin left就可以了

所以呢我们在这把margin top left取出来

那我们取margin top left的时候呢

肯定都是从这个computed style里面去取

我们把它给它拿过来

我们要从这里边一次取两个变量

一个是margin top一个是margin left

所以我们可以用解构的赋值方法

const

这里面写marginTop

我们可以再给他起个别的名mt

然后呢marginLeft

ml

等于

这样的话呢我们就直接去到两个变量

然后在这直接剪掉就可以了减去

但是注意这里要做一个parseInt

因为它取到的是带"px"的一个支付串

所以呢我们直接给

它parseInt一下这是ml

然后呢下边这块

减去

parseInt(mt)

好我们再来试一下

刷新

大家看，这样就解决了