一个用于在图片上拖动的组件
git
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方法中阻止默认行为
offsetX与offsetY为实验性属性，在firefox下表现不正常，可以获取到，但是为0。在dragstart与dragend中只能获取到screenX，screenY，clientX，clientY。因此第二版该用clientX与clientY来处理
在dragstart中记录起始点
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事件