Converting flash to html5/javascript app. #02 «startDrag in javascript»

We have such code in action script written on slider element:

this.ratio=31 ;
dragger.onPress=function(){
	this.startDrag(true,0,0,line._width,0);
	this.onEnterFrame=function(){
		var kerroin=0.38; 
		ratio=int(Math.round(this._x)*kerroin);
	}
}
dragger.onRelease=dragger.onreleaseOutside=this.stopDrag;

And code on symbol which will be changed by scrolling

this.onEnterFrame=function(){
	if (mySlider.ratio > 1) {
		gotoAndStop(mySlider.ratio);
	}
}

Here you can see how it works:

This is an example, already converted to html5/js

And here is my solution on converting «starDrag/stopDrag» methods to javascript


var that = this;
var totalFrames = that.mainMovie.timeline.duration;
var shiftLeft = that.mySlider.x;
var shiftRight = that.mySlider.x+200;

that.dragger.x = shiftLeft+100;
that.dragger.y = that.mySlider.y;

var flag = false;
var draggerTimer;
var frameC = 0;
var cursorX, cursorY, tmp;
	
function getCoords(e, type){
	tmp = stage.globalToLocal(e.pageX, e.pageY);
	cursorX = tmp.x;
	cursorY = tmp.y;
	if(type == 'x'){
			return Math.floor(cursorX);
		}
	else{
			return Math.floor(cursorY);
		}
 }
 
document.onmousedown = function(e) {
	if( getCoords(e, 'x') <= that.dragger.x+20 && getCoords(e, 'x') >= that.dragger.x-20){
		if(getCoords(e, 'y') <= that.dragger.y+20 && getCoords(e, 'y') >= that.dragger.y-20){
			flag = true;
		}
	}
}
document.onmouseup = function(e) {
	flag = false;
}
document.onmousemove = function(e) {
    dragDragger(e);
  }
function dragDragger(e){
		if(flag){
			if(that.dragger.x < shiftRight){
				if(that.dragger.x > shiftLeft){
					that.dragger.x = getCoords(e, 'x');
				}
				else{
						that.dragger.x = shiftLeft+1;
						flag = false;
					}
			}
			else{
					that.dragger.x = shiftRight-1;
					flag = false;
				}
			changeFrames();
		}
	}

function changeFrames(){
		frameC = Math.floor((that.dragger.x - shiftLeft)/200*totalFrames);
		that.mainMovie.gotoAndStop(frameC);
		console.log(frameC);
	}

 

  1. First of all, program takes slider parameters: coordinates, size and shift from the canvas border
  2. Then program starts listening if user pressed mouse button, if he has program checks if coordinates of mouse is around of dragger.
    document.onmousedown = function(e) {
    	if( getCoords(e, 'x') <= that.dragger.x+20 && getCoords(e, 'x') >= that.dragger.x-20){
    		if(getCoords(e, 'y') <= that.dragger.y+20 && getCoords(e, 'y') >= that.dragger.y-20){
    			flag = true;
    		}
    	}
    }
  3. Then we have mouse move listener. It checks if mouse was pressed and if it was started to change dragger coordinates
    document.onmousemove = function(e) {
        dragDragger(e);
      }
    function dragDragger(e){
    		if(flag){
    			if(that.dragger.x < shiftRight){
    				if(that.dragger.x > shiftLeft){
    					that.dragger.x = getCoords(e, 'x');
    				}
    				else{
    						that.dragger.x = shiftLeft+1;
    						flag = false;
    					}
    			}
    			else{
    					that.dragger.x = shiftRight-1;
    					flag = false;
    				}
    			changeFrames();
    		}
    	}

If you want to create responsive application you need to use «globalToLocal» method.

function getCoords(e, type){
	tmp = stage.globalToLocal(e.pageX, e.pageY);
	cursorX = tmp.x;
	cursorY = tmp.y;
	if(type == 'x')return Math.floor(cursorX);
	else return Math.floor(cursorY);
 }