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

实例

一个可拖动的段落：

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

语法

element draggable="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>
    

以上就是html5规定元素是否可拖动的属性draggable的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！