HTML 참조 매뉴얼

HTML 태그大全

HTML draggable 속성

전역 속성 draggable는 요소가 드래그 앤 드롭 操作 API를 사용하여 드래그할 수 있는지 표시하는 범주형 속성입니다。

draggable의 값은 다음과 같습니다：
　　　 true, 이는 요소가 끌어 넣을 수 있음을 의미합니다
　　　 false, 이는 요소가 끌어 넣을 수 없음을 의미합니다
이 속성에 값이 설정되지 않으면, 기본 값은 auto입니다. 이는 브라우저가 정의한 기본 동작을 의미합니다.
이 속성은 열거형 타입이며, 부울 타입이 아닙니다. 따라서 true 또는 false 값을 명시적으로 지정해야 합니다. 예를 들어 <label draggable>Example Label</label> 이와 같은 간단한 표기는 허용되지 않습니다. 올바른 사용법은 <label draggable="true">Example Label</label>.
기본적으로, 선택된 텍스트, 이미지, 링크만 끌어 넣을 수 있습니다. 다른 요소는 ondragstart 이벤트를 설정해야 합니다.

HTML 전역 속성

온라인 예제

예제는 이동할 수 있는 문단을 보여줍니다：

예제

!DOCTYPE　HTML>
<html>
<head>
<meta　charset="utf-8">　
<title>기본 튜토리얼(w3(codebox.com)</title>
<style　type="text/css">
#div1　{width:400px;height:80px;padding:10px;border:1px　solid　red;}
</style>
<script　type="text/javascript">
function　allowDrop(ev)
{
　　　　ev.preventDefault();
}
function　drag(ev)
{
　　　　ev.dataTransfer.setData("Text",ev.target.id);
}
function　drop(ev)
{
　　　　var　data=ev.dataTransfer.getData("Text");
　　　　ev.target.appendChild(document.getElementById(data));
　　　　ev.preventDefault();
}
</script>
</head>
<body>
<div　id="div1"　ondrop="drop(event)"　ondragover="allowDrop(event)"></div>
<br　/>
<p　id="drag1"draggable="true"　ondragstart="drag(event)">이동할 수 있는 문단입니다. 이 문단을 위上面的에 있는 빨간 사각형 프레임에 끌어 넣으세요.</p>
</body>
</html>

테스트를 해보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 및 Safari 브라우저가 draggable 속성을 지원합니다。

주의: Internet Explorer 8 및 이전 IE 버전은 draggable 속성을 지원하지 않습니다。

정의와 사용법

draggable 속성은 요소가 드래그 가능한지 여부를 지정합니다。
추가로:링크와 이미지는 기본적으로 드래그 가능합니다.
추가로: draggable 속성은 드래그 앤 드롭 작업에서 일반적으로 사용됩니다。

HTML 4.01 와 HTML5간의 차이

draggable 속성은 HTML5 추가된 것입니다.

문법

　　　　 <요소 draggable="true|false|auto">

속성 값

값	설명
true	요소가 드래그 가능하도록 지정합니다。
false	요소가 드래그 가능하지 않도록 지정합니다。
자동	브라우저의 기본 기능을 사용하십시오。

HTML 전역 속성

HTML: <template> 태그