HTML5 拖放、交换位置

2018-06-24 02:28:40来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

设置元素为可拖放

draggable 属性设置为 true:

    <img draggable="true" />
拖动什么 - ondragstart 和 setData()
dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(e) {
        e.dataTransfer.setData("text/html", value);
    }
注:"text/html"参数,我在Mac上用Safari打开,遇到过不能正常解析,解决方法把html和text位置互换一下。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

  event.preventDefault();
进行放置 - ondrop
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("text/html") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

function drop(e) {
    e.preventDefault();
}
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释:在 Safari 5.1.2 中不支持拖放。

示例:

Example1:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .drag {
        width: 50px;
        height: 50px;
        background: blue;
        display: inline-block;
        margin: 10px;
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        cursor: move;
    }
    </style>
</head>

<body>
    <div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1</div>
    <div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2</div>
    <div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3</div>

    <script type="text/javascript">
        var srcEl = null;
        function drag(e, el) {
            srcEl = el;
            e.dataTransfer.setData("text/html", el.innerHTML);
        }
        function drop(e, el){
            e.preventDefault();
            // e.stopPropagation();
            if (srcEl != el) {
                srcEl.innerHTML = el.innerHTML;
                el.innerHTML = e.dataTransfer.getData("text/html");
            }
        }
        function allowDrop(e) {
            e.preventDefault();
        }
    </script>
</body>

</html>
Example2:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    #div1 {
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }

    #drag1 {
        width: 300px;
        height: 300px;
    }
    </style>
</head>

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="drag1" draggable="true" ondragstart="drag(event)"
        src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" />
    <script type="text/javascript">
    function drag(e) {
        e.dataTransfer.setData("text/html", e.target.id);
    }

    function drop(e) {
        e.preventDefault();
        e.stopPropagation();
        var id = e.dataTransfer.getData('text/html');
        e.target.appendChild(document.getElementById(id));
    }

    function allowDrop(e) {
        e.preventDefault();
    }
    </script>
</body>

</html>

 W3school原文链接:http://www.w3school.com.cn/html5/html_5_draganddrop.asp

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html基础用法(下)

下一篇:idea web 配置相对路径