var line = { starting_point: {x: 0, y: 0}, end_point: {x: 0, y: 0} }; var drawing = { active: false, draw_start: null, draw_move: null, draw_end: null, draw_cancel: null }; function down(e){ // from http://www.quirksmode.org/js/findpos.html var x = e.pageX, y = e.pageY; var obj = e.target; do { x -= obj.offsetLeft; y -= obj.offsetTop; } while(obj = obj.offsetParent); line.starting_point.x = x; line.starting_point.y = y; line.end_point.x = x; line.end_point.y = y; drawing.active = true; drawing.draw_start(line); } function up(e){ drawing.active = false; drawing.draw_end(line); } function move(e){ if(drawing.active){ var x = e.pageX, y = e.pageY; var obj = e.target; do { x -= obj.offsetLeft; y -= obj.offsetTop; } while(obj = obj.offsetParent); line.end_point.x = x; line.end_point.y = y; drawing.draw_move(line); } } function out(e){ // This didn't work too well // drawing.active = false; // drawing.draw_cancel(line); } function init_drawing(element, draw_start, draw_move, draw_end, draw_cancel){ drawing.draw_start = draw_start; drawing.draw_move = draw_move; drawing.draw_end = draw_end; drawing.draw_cancel = draw_cancel; // Desktop clients element.addEventListener('mousedown', down, false); element.addEventListener('mouseup', up, false); element.addEventListener('mousemove', move, false); element.addEventListener('mouseout', out, false); // Phones/etc clients element.addEventListener('touchstart', down, false); element.addEventListener('touchend', up, false); element.addEventListener('touchmove', move, false); element.addEventListener('touchcancel', out, false); } // To prevent scrolling on devices function prevent_scrolling(event){ event.preventDefault(); }