[attribute] HTML - draggable 속성 - 요소 끌기 가능 여부 지정 (= draggable속성 = 드래거블속성)

1. draggable 예제 - 요소 끌기 가능 여부 지정
2. draggable 정의
3. draggable 구문

draggable 예제 - 요소 끌기 가능 여부 지정

※ 텍스트를 상자 안으로 끌어다 놓기 가능

 

<style>

#box {

    width: 250px;

    height: 70px;

    padding: 10px;

    border: 1px solid gray;

}

</style>

<script>

function allowDrop(e) {

  e.preventDefault();

}

function drag(e) {

  e.dataTransfer.setData("Text", e.target.id);

}

function drop(e) {

  var data = e.dataTransfer.getData("Text");

  e.target.appendChild(document.getElementById(data));

  e.preventDefault();

}

</script>

<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p id="hz" draggable="true" ondragstart="drag(event)">홈짱닷컴 Homzzang.com</p>

결과보기

draggable 정의

 

요소 끌기 가능 여부 지정.

 

---

 

1.

• 링크와 이미지는 기본적으로 끌 수 있음.
• draggable 속성은 (drag/drop) 작업할 때 주로 사용.
• 전역속성이라 모든 요소에서 사용 가능.

 

2.

IE9 이상 주요 최신 브라우저 모두 지원.

 

draggable 구문

 

<element draggable="true|false|auto">

 

---

[속성값]

 

• true - 끌기 가능 O
• false - 끌기 가능 X
• auto - 브라우저 기본 설정 따름.