jquery ui의 draggable()를 이용해서 특정 객체를 원하는 장소로 정렬해서 이동시키기
- draggable() 함수 - 객체의 위치를 마우스로 움직여서 바꿀수 있게 해주는 함수
- 속성값 { options : "value"} 식으로 설정
- { option : function( event , ui ) { } 와 같이 해당 event/ui 객체도 가지고 올수잇음
- revert - droppable 함수가 아닌 다른곳에 위치 되었을때 처음의 위치로 돌아가게 할지 여부를 결정
- helper - drag 할때 그 자신 ( original ) 객체를 가지고 움직일지 혹은 clone을 만들어서 움직일지 결정
- start - drag 가 시작될때 발생하는 event
- drag - drag 가 실행되는 동안 계속 발생하는 event
- stop - drag 가 중단됬을때 발생하는 event
- droppable() 함수 - draggable 객체의 목표지점을 설정
- 속성값
- accept - drop을 허용할 객체 설정
- drop - drop이 완료된뒤에 발생하는 event ( drag의 stop 이벤트 뒤에 발생 )
- 소스
- 기본 변수들 설정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//Move Distance
var topDis=0;
var leftDis=0;
//boolean to revert check
var isRevert = true;
//final object loc
var fTop=0;
var fLeft=0;
//droppable target
$contain=$(".contain");
//draggable target
$object = $(".test01").eq(0);
| cs |
- draggable()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
//움직일 객체
$object.draggable(
{
//드래그가 끝난뒤 제자리로 돌아오게 하는 속성값
revert:function(event,ui){
//droppable 객체가 아닌곳에 드래그 됫을때
if(event==false){
isRevert=false;
return true;
//droppable 객체에 들어갓을때
}else{
isRevert=true;
}
},
//드래그되는 객체가 본인 자체일지 아니면 그외 다른것일지
//해당 함수의 return 값이 드래그되어서 움직임
helper:function(){
$helper=$(this).clone();
return $helper;
},
//드래그가 시작됬을때 발생
start:function(event,ui){
//최종 더해질 객체
$final=$(this).clone();
//잠시 더해져서 에니메이션을 보여줄 객체
$clone=$(this).clone();
},
//드래그 도중 발생
drag:function(event,ui){
},
//드래그가 중지됬을때 발생
stop:function(event,ui){
//console.log(event.target);
//이벤트 중인 타깃 객체 helper객체가아닌
//original 객체
//console.log(ui.offset); 최종 좌표
//제대로 droppable 객체 안에 들어갔을때
if(isRevert){
//최종 객체를 더해주고
$contain.append($final);
//최종 객체의 위치를 지정 후 거리 계산
//visibility 속성은 해당위치에 존재함으로 밑의 과정이
//display 속성은 해당위치에 존재하지 않기때문에 필요함
$finalTop=$final.offset().top;
$finalLeft=$final.offset().left;
//객체를 숨기고
$final.css("visibility","hidden");
//이동할 객체를 생성
$clone.css("position","absolute");
$contain.append($clone);
//drop 위치에 객체 배정
$clone.offset({
top:ui.offset.top,
left:ui.offset.left
})
//거리 계산
topDis=$finalTop-ui.offset.top;
leftDis=$finalLeft-ui.offset.left;
$clone.animate({left:"+="+leftDis},function(){
//이동한 객체는 에니메이션 종료 후 삭제
$(this).remove();
//완료될시 모든 객체를 보여줌
$contain.children().css("visibility","visible");
});
$clone.animate(
{top:"+="+topDis},
{queue:false}
);
}
//$(this).animate({marginLeft:"+="+leftDis});
}
});
| cs |
- droppable
1
2
3
4
5
6
7
8
9
10
|
$contain.droppable({
accept:".test01",
drop:function(event,ui){
//drop 펑션
//draggable의 stop function이 종료된 후에
//발생
}
})
| cs |
댓글 없음:
댓글 쓰기