Drag and move, try it
new Vue({
el: '#module',
template: '<div class="reference"' +
' ref="reference"' +
' draggable="false"' +
' :style="style"' +
' @touchstart="drag=true"' +
' @touchmove="touch"' +
' @touchend="drag=false"' +
' @mousedown="drag=true"' +
' @mouseup="drag=false"' +
' @mousemove="move">' +
' <popper v-if="show"' +
' :referenceElm="$refs.reference"' +
' :popperOptions="options"' +
' arrowPosition="start">' +
' <div class="content">popper</div>' +
' </popper>' +
'</div>',
data: function () {
return {
show: false,
drag: false,
options: {
placement: 'bottom-start',
positionFixed: true,
modifiers: {
preventOverflow: {
padding: 20
}
}
},
style: null,
initOffset: { left: 0, top: 0 }
}
},
methods: {
move: function (e) {
if (this.drag) {
this.style = {
left: (e.pageX - this.$refs.reference.offsetWidth / 2 - this.initOffset.left) + 'px',
top: (e.pageY - this.$refs.reference.offsetHeight / 2 - this.initOffset.top) + 'px'
}
}
},
touch: function (e) {
e.preventDefault()
this.move(e.changedTouches[0] || e.touches[0])
}
},
components: { 'popper': VuePopper },
mounted: function () {
this.$nextTick(function () {
var obj = ScrollGet.posRelativeToPage(this.$refs.reference)
this.initOffset = {
left: obj.pageLeft,
top: obj.pageTop
}
this.show = true
})
}
})