Question

I'm a teacher at a school which has an SmartBoard interactive whiteboard in each classroom. I'm trying to create a web application for kids to use that basically involves dragging and dropping various elements around a web page. I've actually already created one that works fine when used on a computer with a mouse. However, on the SmartBoard, the drag-and-drop really lags, and sometimes fails completely.

As far as I can tell, the whiteboard doesn't mimic the onmousedown capability, and instead all touches are interpreted as onclicks. Is there any way around this? I can't think of a way to implement drag-and-drop without using onmouseup and onmousedown, nor do I know of any way to make the whiteboard interpret the input differently.

The only way I can think of to get around this is to write the application in Java, since I know from experience this will work. However, it's obviously a lot more work, so I'd rather not do it if I don't have to.

Was it helpful?

Solution

First thing I would do is log all the events that the smartboard allows you to register:

function log(e) {
  console.log(e.type, e.pageX, e.pageY, e);
}

document.addEventListener('mousedown',log,false);   
document.addEventListener('mousemove',log,false);
document.addEventListener('mouseup',log,false);

(console.log is native to Google Chrome, you may need to install plugins to other browsers.)

This will help you decide what to do. A possible solution would be to use a double click to trigger the start/stop of the dragging motion.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top