JavaScript/jQuery

드로그 앤 드롭

Jooninim 2018. 6. 25. 16:30

1. 사용용도


사용자가 웹을 유동적으로 이용하기 위하여 사용


2. 코딩 방법


1
2

$("#drag").draggable();
$("#drop").droppable();

cs

.draggable() : 드래그 제이쿼리 API

.droppable() : 드롭 제이쿼리 API


3. 실습


1. Element(html 정보)를 넣어준다. 

1
2
<div id="drag"></div>
<div id="drop"></div>
cs


2. css 정보를 넣어준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    #drag {
        width: 100px;
        height: 100px;
        background: #101010;
        cursor: pointer;
    }
    #drop {
        width: 100px;
        height: 100px;
        background: #505050;
    }
</style>
cs


3. javascript 정보를 넣어준다.

1
2
3
4
5
6
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script>
    $("#drag").draggable();
    $("#drop").droppable();
</script>
cs


4. 결과 확인

검정색 박스

- 드래그 (<div id="dreg"></div>)

회색 네모

- 드롭 (<div id="drop"></div>)


4. 응용 하기

1
2
3
4
5
6
7
8
9
10
<script>
    $("#drag").draggable({
        axis: "y"
    });
    $("#drop").droppable({
        drop: function(event, ui) {
            $("#drop").fadeOut();
        }
    });
</script>
cs


5. 결과 확인

axis : "y"

- 드래그 수직으로만 이동

drop: function(event, ui) {$("#drop").fadeOut();}

- 드래그 박스 드롭구역에 놓을시 드롭 박스 사라짐


5. 전체 코드

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
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <title>test</title>
    <style>
        #drag {
            width: 100px;
            height: 100px;
            background: #101010;
            cursor: pointer;
        }
        #drop {
            width: 100px;
            height: 100px;
            background: #505050;
        }
    </style>
</head>
 
<body>
    <div id="drag"></div>
    <div id="drop"></div>
    
    <script>
        $("#drag").draggable({      // 드래그  
            cursor:"pointer"
            ,axis: "y"
        });
        $("#drop").droppable({
            drop: function(event, ui) {
                $("#drop").fadeOut();
            }
        });
    </script>
</body>
 
</html>
cs