Drga and drop

Div that can be dragged and dropped on contianer div

by Jorge Bustos Pereda

HTML

<div class="container" id='container' >

  <div class="content" id="content">

  </div>

</div>

CSS

body {
  background-color: black;
}

.container {
  width: 500px;
  height: 300px;
  border: solid 3px red;
  position: absolute;
  margin: 10px 10px;
}

.content {
  width: 50px;
  height: 35px;
  border: solid 2px yellow;
  position: relative;
  top: 0;
  left: 0;
}

JavaScript

var content = document.getElementById('content');
content.addEventListener('mousedown', mouseDown);
content.addEventListener('mouseup', mouseUp);
content.addEventListener('mousemoves', start);

var ini = { x:0, y:0 };
var upd = { x:0, y:0 };

function mouseDown(event) {
	console.log('mouseDown', event);
  ini.x = event.offsetX;
  ini.y = event.offsetY;
  log();
}

function mouseUp(event) {
	console.log('mouseUp', event);
	upd.x = event.offsetX;
  upd.y = event.offsetY;
  log();
  translate();
}

function translate(){
	content.style.transform 
  	= `translate(${upd.x-ini.x}px, ${upd.y-ini.y}px)`; //``
}

function start(event) {
	console.log('', event);
}

function log(){
	console.log(`ini:${ini.x},${ini.y} => ${upd.x},${upd.y}`) //``
}

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}