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++; });
<button id="add" type="button">add</button> <div id="board"> </div>