JSFiddle - React, Tailwind, and code Playground

by kigorw

HTML

<div class="btns">

  <button id="btnLeft">
    Left
  </button>
    <button id="btnUp">
    Up
  </button>
    <button id="btnDown">
    Down
  </button>
  <button id="btnRight">
    Right
  </button>
  
  <button id="btnReset">
    Reset
  </button>
  
</div>
<input type="range" min="100" max="300" value="100" class="slider" id="sliderScale">
<input type="number" min="100" max="300" value="100"  id="txtScale"/>


<div draggable="true" class='object'>
  <img width="100%" src="https://vignette.wikia.nocookie.net/minecraft/images/5/59/HerobrineBody.png/revision/latest/scale-to-width-down/340?cb=20150820180652"/>
</div>

CSS

.btns {
  margin: 30px;
}

button {
  padding: 20px;
  margin-right: 5px;
}

.object {
  width: 60px;
  height: 60px;
  padding: 30px;
  position: relative;
  transition: all 0.2s ease;
  user-select: none;

}

.draggable {
  transition: none;
}

JavaScript

const btnLeft = document.querySelector('#btnLeft')
const btnRight = document.querySelector('#btnRight')

const btnUp = document.querySelector('#btnUp')
const btnDown = document.querySelector('#btnDown')

const btnReset = document.querySelector('#btnReset')
btnReset.addEventListener('click', () => reset(), true)


const el = document.querySelector('.object')

let x = 0
let y = 0
let cursorX = 0
let cursorY = 0

/* let x_pos = document.all ? window.event.clientX : e.pageX;
let y_pos = document.all ? window.event.clientY : e.pageY; */

/* el.addEventListener('dragStart', e => {
  el.classList.add('draggable')
  x = el.offsetLeft
  y = el.offsetTop
})

el.addEventListener('drag', e => {
  const newX = x + e.offsetX
  const newY = y + e.offsetY
  el.style.left = newX + 'px'
  el.style.top = newY + 'px'
  
  console.log({x, y, offsetX: e.offsetX})  
}) */


const delta = 50

btnLeft.addEventListener('click', () => move(-delta, 0), true)
btnRight.addEventListener('click', () => move(delta, 0), true)

btnUp.addEventListener('click', () => move(0, -delta), true)
btnDown.addEventListener('click', () => move(0, delta), true)

const slider = document.querySelector('#sliderScale')
slider.addEventListener('input', () => move(0, 0, slider.value), true)

const txtScale = document.querySelector('#txtScale')

txtScale.addEventListener('input', () => move(0, 0, txtScale.value), true)

reset()

function getX() {
	return (parseInt(el.style.left, 10) || 0)
}

function getY() {
	return (parseInt(el.style.top, 10) || 0) 
}

function move(x, y, zoom) {
  el.style.left = (getX()+ x) + 'px'
  el.style.top = (getY()+ y) + 'px'

  if (zoom) {
    el.style.transform = 'scale(' + zoom / 100 + ')'

    txtScale.value = zoom
    slider.value = zoom
  }
}

function reset() {
  txtScale.value = 100;
  slider.value = 100;
  el.style.left = '0px';
  el.style.top = '0px';
  el.style.transform = 'scale(1)';
}