一个用于在图片上拖动的组件

git

安装

npm install vue-picture-drag

记录

drag & drop

开始时采用HTML5的drag与drop方法
每个mark都是absolute定位
在dragstart中采用offsetX与offsetY作为偏移量

m.offX = m.left - event.offsetX;
m.offY = m.top - event.offsetY;

dragend中根据offX与offY恢复定位

m.left = event.offsetX + m.offX;
m.top = event.offsetY + m.offY;

父元素和其他需要能被覆盖的元素在allowDrop与drop方法中阻止默认行为

mark.startX = event.clientX
mark.startY = event.clientY
mark.scrollStartX = window.scrollX
mark.scrollStartY = window.scrollY

在dragend中利用结束点的clientX与clientY及scroll来恢复定位

mark.left += (event.clientX - mark.startX + window.scrollX - mark.scrollStartX)
mark.top += (event.clientY - mark.startY + window.scrollY - mark.scrollStartY)

mouse事件

利用drag在windows下的chrome，firefox均有效，而ie直到11才部分支持。所以在0.1版本下的vue-picture-drag不支持ie
在mac中进行测试时发现mac下的浏览器在dragend事件中的clientY均有偏移，而且偏移量改变特别奇怪，经查询可能是mac底层一个事件的原因。因此在后续开发中放弃了drag与drop，采用mouse事件开发
主要使用mouseup，mousedown与mousemove事件