모바일 터치 드래그 슬라이드( 모바일 기계에서만 작동됨 ) 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 |