swipe_area

swipe_area

by Park Mino

HTML

<div class="swipe_area" id="swipe_area" style="height:100px;background-color:#999;">123123123123.</div>

JavaScript

$(function(){
	var _top = 0,
		bStartEvent = false,
		bMoveEvent = false;
    
    var _swipe_area = $('.swipe_area');
    
    _swipe_area.on('touchstart mousedown', function (e) {
    	var touch = event.touches[0];
    	touchstartX = touch.clientX;
    	touchstartY = touch.clientY;
    	bStartEvent = true;
    });
    
    _swipe_area.on('touchmove mousemove', function (e) {
    	if(!bStartEvent) return;
    	e.preventDefault();
    	var touch = event.changedTouches[event.changedTouches.length - 1],
    		touchendX = touch.clientX,
    		touchendY = touch.clientY;
    	if(Math.abs(touchstartY- touchendY) < Math.abs(touchstartX - touchendX)) return;		
    	bMoveEvent = true;
    });
    
    _swipe_area.on('touchend mouseup', function (e) {
    	var touch = event.changedTouches[event.changedTouches.length - 1],
    		touchendX = touch.clientX,
    		touchendY = touch.clientY,
    		_top = touchstartY - touchendY;

    	_top = (_top>0) ? 0 : 1;

    	if(bStartEvent && bMoveEvent){
    		slideStart(_top);
    	}
    	bStartEvent = false;
    	bMoveEvent = false;
    });
    
    function slideStart(_top){
        if(_top<=0){
            console.log('up');
            $('.swipe_area').css('height', '300px')
        }else{
            console.log('down');
            $('.swipe_area').css('height', '100px')
        }        
    }
    
});