드래그 앤 드롭 - draggable 속성, 기본 동작

 

 

 

draggable 속성

·       img요소와 href 속성이 마크업된 <a> 요소는 원래 드래그할 수 있는 요소로 규정되어 있습니다.

·       img요소와 href속성이 마크업된 <a> 요소들외에 모든 요소를 HTML5에서는 draggable 속성을  true로 지정함으로써 드래그할 수 있도록 규정하고 있습니다.

·       HTML5에 새롭게 추가된 draggable속성은 true, false, 값 없음 값을 가질 수 있습니다.

 

 

 

draggable 속성 지정

·       draggable은 드래그 대상이 웹 애플리케이션 안의 요소라면 그 요소에 draggable속성을 지정합니다.

·       draggable 속성이 true 이면 drag 할 수 있는 것이고, false 면 drag를 하지 못합니다.

·       값을 지정하지 않았을 때는 기본 동작을 그대로 사용한다는 의미가 됩니다.

 

<div draggable="true">드래그 가능</div> <div draggable="false">드래그 불가능</div>

<li id="test" draggable="true">dragetest</li>

 

 

 

기본 동작

·       true와 false값을 지정하지 않았을 때는 기본 동작을 그대로 사용한다는 의미가 됩니다.

·       기본 동작은 href 속성이 지정된 a 요소와 src 속성이 지정된 img요소는 드래그 할 수 있고 그 외는 드래그 할 수 없다는 것을 가리킵니다.

 

<div draggable>기본 동작</div>