HTML5 attribute draggable specifies whether an element is draggable-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 attribute draggable specifies whether an element is draggable

黄舟

Nov 03, 2017 am 10:52 AM

h5 html5 drag

Example

A draggable paragraph:

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

Copy after login

Browser support

Firefox

Chrome

Safari

Opera

##Internet Explorer 9+, Firefox, Opera, Chrome, and Safari supported draggable property.

Note: Internet Explorer 8 and earlier versions do not support the draggable attribute.

Definition and usage

The draggable attribute specifies whether the element can be dragged.

Tip: Links and images are draggable by default.

Tip: The draggable attribute is commonly used in drag-and-drop operations. Learn more in our drag and drop tutorial.

Differences between HTML 4.01 and HTML5

The draggable attribute is new in HTML5.

Syntax

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

Copy after login

Attribute value

ValueDescriptiontrueSpecifies that the element is draggable. false Specifies that the element cannot be dragged. autoUse the browser's default behavior.

Example:

<!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="/static/imghw/default1.png"  data-src="http://www.w3school.com.cn/i/w3school_logo_black.gif"  class="lazy"   draggable="true" ondragstart="drag(event)" id="drag1" / alt="HTML5 attribute draggable specifies whether an element is draggable" >
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>

Copy after login

HTML5 attribute draggable specifies whether an element is draggable

The above is the detailed content of HTML5 attribute draggable specifies whether an element is draggable. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn