JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<draggable-image></draggable-image>
<draggable-image></draggable-image>
</div>
<template id="draggable-image">
<img src="http://lorempicsum.com/futurama/255/200/2" class="draggable-image">
</template>
JavaScript
Vue.component('draggable-image', {
template: '#draggable-image',
mounted: function () {
var imageDOM = this.$el;
imageDOM.onmousedown = function (event) {
imageDOM.style.position = 'absolute'
document.onmousemove = function (documentEvent) {
console.log(documentEvent);
imageDOM.style.left = documentEvent.pageX-25+'px'
imageDOM.style.top = documentEvent.pageY-25+'px'
}
this.onmouseup = function (event) {
document.onmousemove = null;
}
};
imageDOM.ondragstart = function() { return false }
}
});
new Vue({
el: '#app'
})