html5规定元素是否可拖动的属性draggable-H5教程-PHP中文网

首页

web前端

H5教程

html5规定元素是否可拖动的属性draggable

黄舟

Nov 03, 2017 am 10:52 AM

h5html5拖动

实例

一个可拖动的段落：

<p draggable="true">这是一个可拖动的段落。</p>

浏览器支持

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 中的新属性。

语法

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

属性值

值	描述
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" />
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>

}}@}FBL}`4F~`D}_R7TW_PS.png $){TK1LR}PFGTM_IEHL083Y3.png$

以上是html5规定元素是否可拖动的属性draggable的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。