標(biāo)題為啥寫(xiě)vue呢汁针？原因我的這個(gè)功能是在vue的項(xiàng)目里面的碗旅，然而實(shí)際上是用js實(shí)現(xiàn)的，與vue并無(wú)太大的關(guān)系棠笑。
如果你跟我一樣梦碗，也是vue項(xiàng)目，那在拖拽的函數(shù)內(nèi)部this的指向是有問(wèn)題的，一定要在外部定義that洪规。
這樣編輯看著好丑呀印屁，不知道別人的代碼段是咋放上來(lái)的。
我發(fā)布該文章斩例，一方面是造福跟我有一樣需求的小伙伴雄人，另外一方面是做個(gè)記錄，方便自己以后查詢(xún)念赶。
閑話(huà)少敘础钠，言歸正傳。如果你發(fā)現(xiàn)safari里面拖拽距離計(jì)算的有問(wèn)題晶乔，那可能是樣式影響的珍坊，也可能是瀏覽器的什么問(wèn)題。反正我當(dāng)時(shí)做完后在谷歌瀏覽器是完美的正罢。后來(lái)優(yōu)化了其他的樣式問(wèn)題，發(fā)現(xiàn)在Safari里好用了驻民，也OK了翻具。我也想還原找到原因，奈何改了太多樣式了回还，且沒(méi)有備份裆泳。嘗試改回去，復(fù)現(xiàn)bug,但失敗了柠硕。
上干貨工禾！
元素1：id="leftVideoOut"，335px*188px
元素2：ref="mainVideo"蝗柔。
功能需求：兩個(gè)元素大概這樣布局闻葵。當(dāng)元素2全屏的時(shí)候，元素1要可以隨意拖放,但要全部顯示在屏幕內(nèi)癣丧。
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"
}
上面方法莫名奇妙的由原來(lái)的不好用變好用了槽畔，現(xiàn)在又莫名其妙的表不好用了。
百度到了一個(gè)比較好的處理方法胁编，暫時(shí)是沒(méi)有發(fā)現(xiàn)問(wèn)題：基于vue實(shí)現(xiàn)元素拖拽
ps:主要還是時(shí)間上的表現(xiàn)不一致厢钧，drag? api是html5的規(guī)范，mouse模型很古老了嬉橙，幾乎所有的瀏覽器都實(shí)現(xiàn)的差不多早直。mouse模型可以做到元素跟隨鼠標(biāo)移動(dòng)。 drag只能做到一個(gè)虛的輪廓跟隨鼠標(biāo)移動(dòng)市框，實(shí)際上元素還在原來(lái)的位置上霞扬。
