Recent Posts
Recent Comments
Link
Tags more
12-04 00:16
Today
Total
관리 메뉴

삶 가운데 남긴 기록 AACII.TISTORY.COM

javascript 드래그 앤 드롭 본문

DEV&OPS/Javascript

javascript 드래그 앤 드롭

ALEPH.GEM 2022. 3. 17. 10:34

draggable

HTML element를 드래그 할 수 있도록 attribute를 설정할 수 있습니다.

<div draggable = "true"> 드래그 </div>

 

드래그 앤 드롭 관련 이벤트

  • dragstart : 드래그 시작 할 때 발생
  • drag : 드래그를 하는 동안 발생
  • dragend : 드래그가 끝났을 때 발생
  • dragenter : 마우스가 드롭 요소의 경계선 안쪽으로 들어갈 때 발생
  • dragover : 마우스가 드롭 요소의 경계선 안에 있을 때 발생
  • dragleave : 마우스가 드롭 요소의 경계선 바깥으로 나왔을 때 발생
  • drop : 요소에 드롭할 때 발생

 

데이터 전달

드래그 앤 드롭 이벤트의 dataTransfer 프로퍼티

  • types : setData 메서드로 설정한 데이터 타입 목록
  • files : 드래그한 파일 객체 목록
  • effectAllowed : 드래그 타겟 요소가 허용하는 작업의 유형
  • dropEffect : 드롭 타겟 요소에 표시하는 효과
  • setData(format, data) : 드래그 타겟 요소의 데이터 타입(data)을 특정 데이터 타입(format)으로 설정
  • getData(format) : 드롭 타겟 요소에서 데이터를 특정 타입(format)으로 가져옴
  • clearData(format) : format 타입으로 지정된 데이터를 삭제한다. format을 지정하지 않으면 모든 데이터를 삭제함.
  • setDragImage(element x, y) : 드래그 이미지를 설정합니다. element는 img요소, x와 y는 이미지의 오프셋 좌표
  • addElement(element) : 드래그 타겟의 element를 드롭 타겟에 추가.

드래그 타겟 에서 드롭 타겟으로 데이터 전달 순서

1.  드래그 타겟의 dragstart 이벤트 처리기 안에서 dataTransfer 프로퍼티의 setData() 메서드에 데이터 타입을 지정한 데이터를 추가합니다.

e.dataTransfer.setData("text/plain", value);

2. 드롭 타겟의 dragover 이벤트 처리기 안에서 브라우저의 기본 동작을 취소합니다. dragover가 되면 drop이벤트가 최소되기 때문입니다.

e.preventDefault();

3. 드롭 타겟의 drop 이벤트 처리기 안에서 dataTransfer 프로퍼티의 getData 메서드를 사용해서 데이터를 지정한 데이터 타입으로 가져옵니다.

var value = e.dataTransfer.getData("text/plain");

지정할 수 있는 데이터 타입 format은 "text/plan", "text/html", "text/uri-list" 입니다.

 

드래그 앤 드롭 예제

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        #dragbox{width: 150px; border:10px solid blue;}
        #dropbox{width: 150px; padding: 50px; border: 10px solid blue; }
    </style>
</head>
<body>
    <div id="dragbox" draggable="true"> 드래그 하세요</div>
    <div id="dropbox">드롭 하세요</div>
    <script>
        window.onload = function(){
            var dragbox = document.getElementById("dragbox");
            var dropbox = document.getElementById("dropbox");

            dropbox.addEventListener("dragenter", function(e){
                e.target.style.borderColor = "red";
            }, false);

            dropbox.addEventListener("dragleave", function(e){
                e.target.style.borderColor = "gray";
            }, false);

            dropbox.addEventListener("drop", function(e){
                e.target.style.borderColor = "gray";
            }, false);
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        #color{margin-bottom: 10px; }
        #dropbox{width: 150px; padding: 50px; border: 1px solid gray; }
    </style>
</head>
<body>
    <input type="color" id="color" draggable ="true">
    <div id="dropbox">드롭 하세요</div>
    <script>
        window.onload = function(){
            var color = document.getElementById("color");
            var dropbox = document.getElementById("dropbox");
            //드래그 시작 할 때 색상값을 dataTransfer 객체의 데이터로 설정
            color.ondragstart = function(e){
                e.dataTransfer.setData("text/plain", e.target.value);
            };
            //드래그 타겟에 마우스가 올라가면 브라우저 기본 동작을 취소(필수)
            dropbox.ondragover = function(e){
                e.preventDefault();
            };
            //요소를 드롭하면 dataTransfer의 데이터로 전달
            dropbox.ondrop = function(e){
                e.preventDefault();     //브라우저 기본 동작 취소(선택)
                e.target.style.backgroundColor = e.dataTransfer.getData("text/plain");
            };

        }
    </script>
</body>
</html>

 

 

 

 

728x90
저작자표시

'DEV&OPS > Javascript' 카테고리의 다른 글

javascript Web Workers  (0) 2022.03.21
javascript BLOB  (0) 2022.03.18
javascript class  (0) 2022.03.15
Ajax  (0) 2022.03.12
javascript 비동기 처리 Promise  (0) 2022.03.12
'DEV&OPS/Javascript' Related Articles more