快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

小编给大家分享一下html5规定元素是否可拖动的属性draggable怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联是一家集网站建设,三都企业网站建设,三都品牌网站建设,网站定制,三都网站建设报价,网络营销,网络优化,三都网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

实例

一个可拖动的段落:

这是一个可拖动的段落。

浏览器支持

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

语法

属性值

描述
true规定元素的可拖动的。
false规定元素不可拖动。
auto使用浏览器的默认行为。

实例:




    
        
        HTML5-draggable(拖放)
        
            #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
        
        
        
            /*
             * 虽然已经设定了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)); //将被拖动元素添加到接收元素尾部
            }
        
    

    

        
             
            
        
                 
    

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

以上是“html5规定元素是否可拖动的属性draggable怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文名称:html5规定元素是否可拖动的属性draggable怎么用
标题来源:http://6mz.cn/article/gdippe.html

其他资讯