JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

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'
})