모바일 터치 드래그 슬라이드

모바일 터치 드래그 슬라이드( 모바일 기계에서만 작동됨 )

HTML

<main id="wrap">

<div id="drag_box">

<div class="bar_box">

<span class="bar"></span>

<span class="cricle"></span>

</div>

<p><span class="count">0</span> </p>

</div>

</main>

SCSS

#wrap{

width:100%; max-width:720px; margin:0 auto; font-size:0;

#drag_box{

$pLR : 40;

$pW : 720 - ( $pLR * 2);

padding: 0 pImg( $pLR );

.bar_box{

margin-top:pImg( 32, $pW ); position: relative; width:100%; overflow: hidden;

.bar{ display:block; width:100%; padding-bottom: pImg( 50, $pW ); background:#000; border-radius: 1.2rem; }

.cricle{ display:inline-block; width:pImg( 50, $pW ); padding-bottom: pImg( 50, $pW ); background:red; border-radius: 1.2rem; position: absolute; top:0; left:0; cursor: pointer;}

}

p{

padding-top:pImg( 20, $pW ); font-size:pFont( 26 ); text-align: center; color:#151515;

span{ display:inline-block; font-size:pFont( 26 ); color: #151515; margin-left:pImg( 10, $pW ); }

}

}

}

SCRIPT

var _w;

var _cricle;

var _value;

var _bar;

var _moveTouchX;

function init()

{

create();

addEvent();

}

function create()

{

_w = $( window );

_cricle = $( ".cricle" );

_value = $( ".count" );

_bar = $( ".bar_box" );

_startTouchX = null;

_moveTouchX = null;

_startPositionX = null;

}

function addEvent()

{

_cricle.bind( "touchstart", touchStart );

_cricle.bind( "touchmove", touchMove );

_cricle.bind( "touchend", touchEnd );

}

function touchStart( $e )

{

$e.preventDefault();

var e = $e.originalEvent;

_startTouchX = e.targetTouches[0].pageX;

}

function touchMove( $e )

{

$e.preventDefault();

var e = $e.originalEvent;

_moveTouchX = ( e.targetTouches[0].pageX - $( this).width() / 2 ) - _bar.position().left;

if( _moveTouchX > (_bar.width() - $( this ).width() ))

{

_moveTouchX = (_bar.width() - $( this ).width());

}else if( _moveTouchX < 0 )

{

_moveTouchX = 0;

}

var max = ( _bar.width() - _cricle.width() ) / 10;

var value = Math.floor( _moveTouchX / max );

_value.text( value );

$( this ).css({

"left": _moveTouchX

});

}

function touchEnd( $e )

{

$e.preventDefault();

}

예제샘플 http://ux.adqua.co.kr/ux/ixkfo86/test/drag/drag.html