Question

I find myself in a rather tenuous situation where I’m developing a web application with an interface almost entirely expressed using RaphaelJS as a front end for SVG, but don’t have access to the target system (don’t get me started). The target system is an Asus Slate device running Windows 7, and it is touchscreen enabled.

My understanding was that Raphael’s drag support would automatically include simple touch events — so that the touchscreen would automatically behave like a mouse. However, the draggable elements become uninteractive on the slate. I have tried using Raphael’s touchstart, touchend, and touchmove events with the same functions I’m passing to drag, as follows:

var element = canvas.circle( canvas.cwidth / 2, canvas.cheight / 2, 100 ).attr( { fill: 'red', stroke: 'black', 'stroke-width': 5, cursor: 'move' } );

var startDrag = function( x, y )
{
    console.log("starting drag" );
    element.attr( { 'fill-opacity': 0.5 } );
};
var endDrag = function( x, y )
{
    console.log("stopping drag" );
    element.animate( { transform: "T0,0", fill: 'red', 'fill-opacity': 1 }, 1000, 'bounce' );
};
var continueDrag = function( dx, dy, x, y )
{        
    var r = Math.sqrt( dx * dx + dy * dy ) / ( canvas.cwidth / 2 ) * 255;
    var g = x / canvas.cwidth * 255;
    var b = y / canvas.cheight * 255;
    element.transform( [ "T", dx, dy ] );
    element.attr( 'fill', Raphael.rgb( r, g, b ) );
};

element.touchstart( startDrag );
element.touchend( endDrag );
element.touchmove( continueDrag );
element.drag( continueDrag, startDrag, endDrag );

Unfortunately, this has no effect at all.

Can anyone offer me any useful device that doesn’t include flying down to Texas to gain development access to the target device?

Answer 1

Well this works on a PlayBook and it does not require using the touch events other than for equivalent of a click event

/* Set up generic drag */   
var start=function() {
    this.data("oldt", this.transform());                 
}, move = function(dx, dy) {
    // Set up reluctance:- only move if changed by at least 25 pixels
    if (dx>=25 || dy>=25){
        this.attr("fill","blue");
        this.transform(this.data("oldt") + "T" + dx + "," + dy);
        this.data("move", "T" + dx + "," + dy);
    }}, up = function() {
        this.attr("fill","green")   
    };  
    var box = canvas.rect(150,50,100,100).attr("fill", "white");
    box.drag(move,start,up);
    box.touchstart(function(){
    this.attr("fill","red");
});

If the box is dragged it turns blue and green when released. If touched then it turns red until it is moved. The reluctance reduces sensitivity to movement so that a touch event is not changed into a drag by small movements. See this thread.