标题为啥写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只能做到一个虚的轮廓跟随鼠标移动，实际上元素还在原来的位置上。
