js 拖拽元素（vue）

标题为啥写vue呢？原因我的这个功能是在vue的项目里面的，然而实际上是用js实现的，与vue并无太大的关系。

如果你跟我一样，也是vue项目，那在拖拽的函数内部this的指向是有问题的，一定要在外部定义that。

这样编辑看着好丑呀，不知道别人的代码段是咋放上来的。

我发布该文章，一方面是造福跟我有一样需求的小伙伴，另外一方面是做个记录，方便自己以后查询。

闲话少叙，言归正传。如果你发现safari里面拖拽距离计算的有问题，那可能是样式影响的，也可能是浏览器的什么问题。反正我当时做完后在谷歌浏览器是完美的。后来优化了其他的样式问题，发现在Safari里好用了，也OK了。我也想还原找到原因，奈何改了太多样式了，且没有备份。尝试改回去，复现bug,但失败了。

上干货！

元素1：id="leftVideoOut"，335px*188px

元素2：ref="mainVideo"。

功能需求：两个元素大概这样布局。当元素2全屏的时候，元素1要可以随意拖放,但要全部显示在屏幕内。

mounted() {

const that = this

var e = e || window.event; //兼容IE浏览器

var x1 = 0;

var y1 = 0;

var x2 = 0;

var y2 = 0;

var leftVideo = document.getElementById('leftVideoOut')

leftVideo.ondragstart = function(e) {

x1 = e.clientX

y1 = e.clientY

}

leftVideo.ondragend = function(e) {

const w0 = that.$refs.mainVideo.offsetWidth

const h0 = document.body.clientHeight

x2 = e.clientX

y2 = e.clientY

var left = leftVideo.offsetLeft - (x1 - x2)

var top = leftVideo.offsetTop - (y1 - y2)

left<0?left = 0 :left = left

left>w0-335?left = w0-335:left = left;

top<0?top = 0 :top = top

top>h0-188?top = h0-188:top = top;

leftVideo.style.left = left + "px"

leftVideo.style.top = top + "px"

}

上面方法莫名奇妙的由原来的不好用变好用了，现在又莫名其妙的表不好用了。

百度到了一个比较好的处理方法，暂时是没有发现问题：基于vue实现元素拖拽

ps:主要还是时间上的表现不一致，drag  api是html5的规范，mouse模型很古老了，几乎所有的浏览器都实现的差不多。mouse模型可以做到元素跟随鼠标移动。 drag只能做到一个虚的轮廓跟随鼠标移动，实际上元素还在原来的位置上。