Move box by drag & drop with Raphael.js

Raphaëlをつかってボックスをdrag&dropで動かす

by bc_rikko

HTML

<script src="https://rawgit.com/DmitryBaranovskiy/raphael/master/raphael.min.js"></script>
<button id="add" type="button">add</button>
<div id="board">
</div>

JavaScript

const paper = Raphael('board', 800, 800);

const createBox = (paper, target) => {
	const box = paper.rect(
  	target.cx,
    target.cy,
    target.width,
    target.height
    );
  box.attr({
    fill: '#333'
  });
  box.node.id = target.id;
  box.drag(drag.onMove, drag.onStart, drag.onEnd);
  box.dblclick(removeBox);
  return box;
}

const drag = {
  onStart (x, y, event) {
  	console.log('start', x, y, event);
    const obj = objectMap[event.target.id];
    obj.node.dx = 0;
    obj.node.dy = 0;
  },
  onMove (dx, dy, x, y, event) {
  	console.log('move', dx, dy, x, y, event);
    const obj = objectMap[event.target.id];
    const diffX = dx - obj.node.dx;
    const diffY = dy - obj.node.dy;
    
    obj.translate(diffX, diffY);
    obj.node.dx = dx;
    obj.node.dy = dy;
  },
  onEnd (event) {
  	console.log('end', event);
  }
};

const removeBox = event => {
	const box = objectMap[event.target.id];
  box.remove();
};

let count = 0;
const objectMap = [];

document.getElementById('add').addEventListener('click', () => {
	const box = createBox(paper, {
    cx: 10,
    cy: 10,
    width: 100,
    height: 100,
    id: `box-${count}`
  });

	objectMap[`box-${count}`] = box;
  count++;
});