本文摘自PHP中文网,作者黄舟,侵删。
实例
一个可拖动的段落:
1 | < p draggable = "true" >这是一个可拖动的段落。</ p >
|
浏览器支持
IE
Firefox
Chrome
Safari
Opera
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。
注释:Internet Explorer 8 以及更早的版本,不支持 draggable 属性。
定义和用法
draggable 属性规定元素是否可拖动。
提示:链接和图像默认是可拖动的。
提示:draggable 属性常用在拖放操作中。请在我们的拖放教程中学习更多内容。
HTML 4.01 与 HTML5 之间的差异
draggable 属性是 HTML5 中的新属性。
语法
1 | < element draggable = "true|false|auto" >
|
属性值
值 | 描述 |
true | 规定元素的可拖动的。 |
false | 规定元素不可拖动。 |
auto | 使用浏览器的默认行为。 |
实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!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" >
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData( "Text" , ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData( "Text" );
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" />
</div>
<div id= "div2" ondrop= "drop(event)" ondragover= "allowDrop(event)" ></div>
</body>
</html>
|
以上就是html5规定元素是否可拖动的属性draggable的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
h5页面如何调用摄像头代码分享
使用h5实现输入框提示语和 正常文本框提示语的方法
HTML5中设置或返回音视频是否在加载后即开始播放的属性autoplay
h5是什么
HTML5的存储方式sessionstorage和localstorage详解
HTML5拖放关于api实现拖放排序的实例代码
h5手机端页面缩放
移动端中touch事件的详解
HTML5 dialog是什么?怎么使用HTML5中的dialog来实现模拟弹窗?
css的工作过程介绍(图文)
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5规定元素是否可拖动的属性draggable