샘플1 http://comlearn.co.kr/project1/mobile/mousemove.html
샘플2 http://comlearn.co.kr/project1/mobile/index.html
샘플3 http://comlearn.co.kr/project1/mobile/mousemove1.html
드레그 mousedown,mouseup,mousemove
예제) 드레그 방향으로 요소이동
html
<div class="wrap">
<div class="section-wrap">
<div class="section">
<h3>섹션0</h3>
</div>
<div class="section">섹션1</div>
<div class="section">섹션2</div>
<div class="section">섹션3</div>
</div>
</div>
css
@charset "utf-8";
html,body{
margin:0;
height:100%;
background:#eeeeee;
}
.wrap{
width:100%;
height:100%;
position:relaive;
float:left;
overflow:auto;
background:red;
scrollbar-width:none; /* fire-fox */
-ms-overflow-style:none; /* ie and edge */
}
.wrap::-webkit-scrollbar{
display:none;
}
.section-wrap{
width:400%;
height:100%;
position:relative;
left:0;
}
.section{
width:25%;
height:100%;
float:left;
background:yellow;
position:relative;
left:0;
display:flex;
justify-content: center;
align-items: center;
color:white;
}
.section>div{
margin:20px;
}
.section:first-child{
background:url(../images/background1.jpg) no-repeat center;
background-size:cover;
background-attachment: fixed;
}
.section:nth-child(2){
background:url(../images/background2.jpg) no-repeat center;
background-size:cover;
background-attachment: fixed;
}
.section:nth-child(3){
background:url(../images/background3.jpg) no-repeat center;
background-size:cover;
background-attachment: fixed;
}
.section:last-child{
background:url(../images/background4.jpg) no-repeat center;
background-size:cover;
background-attachment: fixed;
}
js
$(function(){
//섹션의 개수
var s_length=$(".section").length;
//섹션의 마지막 위치 값
var last_left=$(".section:last-child").offset().left;
//섹션의 너비
var s_width=$(".section").width();
console.log("섹션의 수" + s_length);
console.log("섹션의 마지막 요소의 left "+last_left);
console.log("섹션의 너비 "+s_width);
var x_pos=0; //현재 위치 값 기억 변수
var x=0; // 현재요소의 위치 이동 값 기억변수
var drag=false; //요소를 눌렀을 때와 땠을 때의 판단
//섹션(동작시킬 요소)을 눌렀을 때의 이벤트 처리
$(".section").mousedown(function(e){
x_pos=e.pageX;
//눌렀다는 이벤트 결과를 전달하여 Move시킬 수 있도록 함
drag=true;
return false;
});
$(".section").mouseup(function(e){
$(".mou-up").text("마우스에서 땠어요");
//마우스를 땠을 때 Move이벤트 중지
drag=false;
return false;
});
$(".section-wrap").mousemove(function(e) {
//마우스를 누르고 드레그 했음을 전달
if(drag){
// 요소의 위치에서 (현재의 위치-이벤트 발생 위치를 뺀값을 위치이동 값으로 저장
x=parseInt($(this).css("left"))-parseInt((x_pos-e.pageX));
//현재의 위치에 다음에 발생할 이벤트 위치 계산하기 위한 저장
x_pos=e.pageX;
//요소의 left위치가 시작점 0인지 아니면 마지막 지점인지 찾는 질문
if(x>=0){
//첫번째 지점이면 더이상 움직이지 못하게
x=0; //첫번째 지점 설정
drag=false;
}else if(x<=-last_left){
//마지막 지점이면 더이상 움직이지 못하게
x=-last_left; //마지막 지점 설정
drag=false
}
//현재 요소를 left로 이동
$(this).css({
left:x
});
}
return false;
});
});
애니메이션
$(function(){
var s_length=$(".section").length;
var last_left=$(".section:last-child").offset().left;
var s_width=$(".section").width();
console.log("섹션의 수" + s_length);
console.log("섹션의 마지막 요소의 left "+last_left);
console.log("섹션의 너비 "+s_width);
var count=0;
var x_pos=0;
var x=0;
var drag=false;
var move=0;
var pos=0;
$(".section-wrap").mousemove(function(e) {
if(drag){
x=parseInt($(this).css("left"))-parseInt((x_pos-e.pageX));
x_pos=e.pageX;
if(x>=0){
x=0;
}else if(x<=-last_left){
x=-last_left;
}
$(this).css({
left:x
});
$(this).stop().animate({
left:count*s_width
});
}
return false;
});
$(".section").each(function(index){
$(this).mousedown(function(e){
console.log("x_pos : "+x_pos);
console.log("e.pageX : "+e.pageX);
pos=x_pos-e.pageX;
console.log("포지션 위 : "+pos);
if(pos<0){
move=index+1;
if(index>=3){
move=3;
}
}else{
move=index-1;
if(index==0){
move=0;
}
}
count=-1*move;
x_pos=e.pageX;
drag=true;
return false;
});
});
$(".section").mouseup(function(e){
$(".mou-up").text("마우스에서 땠어요");
drag=false;
return false;
});
});