HTML5 속성 draggable은 요소가 드래그 가능한지 여부를 지정합니다.
- 黄舟원래의
- 2017-11-03 10:52:344422검색
예
드래그 가능한 단락:
<p draggable="true">这是一个可拖动的段落。</p>
브라우저 지원
IE
Firefox
Chrome
Safari
Opera
Internet Explorer 9 이상, Firefox, Opera, Chrome 및 Safari 지원 드래그 가능한 속성.
Note: Internet Explorer 8 및 이전 버전은 draggable 속성을 지원하지 않습니다.
정의 및 사용법
draggable 속성은 요소를 드래그할 수 있는지 여부를 지정합니다.
팁: 링크와 이미지는 기본적으로 드래그 가능합니다.
팁: draggable 속성은 드래그 앤 드롭 작업에 일반적으로 사용됩니다. 드래그 앤 드롭 튜토리얼에서 자세히 알아보세요.
HTML 4.01과 HTML5의 차이점
draggable 속성은 HTML5의 새로운 기능입니다.
Syntax
<element draggable="true|false|auto">
속성 값
| Value | Description |
| true | 요소가 드래그 가능함을 지정합니다. |
| false | 은 요소를 드래그할 수 없도록 지정합니다. |
| auto | 브라우저의 기본 동작을 사용하세요. |
예:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>HTML5-draggable(拖放)</title>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* 虽然已经设定了img元素可被拖动，但是浏览器默认地，无法将数据/元素放置到其他元素中。
* 如果有需要设置某些元素可接受被拖动元素，则要阻止它的默认行为，
* 这要通过设置该接收元素的ondragover 事件，调用event.preventDefault() 方法
*/
function allowDrop(ev) {
ev.preventDefault(); //阻止默认行为
//ev.target.id
//此处ev.target是接收元素，通过事件被绑定在哪个元素即可区分
}
/*
* 当该img元素被拖动时，会触发一个ondragstart 事件，该事件调用了一个方法drag(event)。
*/
function drag(ev) {
//ev.dataTransfer.setData() 方法设置被拖数据的数据类型（Text）和值（被拖元素id），
//该方法将被拖动元素的id存储到事件的dataTransfer对象内，ev.dataTransfer.getData()可将该元素取出。
//此处ev.target是被拖动元素
ev.dataTransfer.setData("Text", ev.target.id);
}
/*
* 当被拖元素移动到接收元素，
* 松开鼠标时（即被拖元素放置在接收元素内时）会出发ondrop事件
*/
function drop(ev) {
ev.preventDefault(); //阻止默认行为
var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出
ev.target.appendChild(document.getElementById(data)); //将被拖动元素添加到接收元素尾部
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--为了使元素可拖动，把 draggable 属性设置为 true-->
<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" / alt="HTML5 속성 draggable은 요소가 드래그 가능한지 여부를 지정합니다." >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
위 내용은 HTML5 속성 draggable은 요소가 드래그 가능한지 여부를 지정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.