zoukankan      html  css  js  c++  java
  • HTML5中drag和drop使用

    H5拖拽api使用

    效果示范:

    拖拽

    实现步骤

    拖拽元素设置:
    (1)设置属性draggable为true使元素可拖拽

     <div id="inner" draggable="true" ondragstart="drag(event)"></div>
    

    (2)绑定dragstart事件,将拖拽元素id存入dataTransfer,用于放置元素时取出对应dom

     /* 拖起inner触发 */
     function drag(e) {
         /* 将被托起的元素id存到dataTranfer里面 */
         e.dataTransfer.setData('id', e.target.id);
     }
    

    放置容器设置

    <div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    

    (1)绑定dragover事件,阻止元素默认事件,使drop事件可以触发

     /* 取消box的默认设置,否则drop没反应 */
     function allowDrop(e) {
         e.preventDefault();
     }
    

    (2)绑定drop事件,放置时触发,利用dataTransfer取出拖拽元素的id,将拖拽元素dom对象放置到当前容器。

    /* 放置元素 */
    function drop(e) {
        /* 获取拖拽元素id,放置到当前元素内部 */
        let id = e.dataTransfer.getData('id');
        e.target.appendChild(document.getElementById(id))
    }
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>drag与drop</title>
        <style>
            .box {
                float: left;
                width: 200px;
                height: 100px;
                margin: 10px;
                border: 1px solid olivedrab;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            #inner {
                width: 180px;
                height: 80px;
                background-color: mediumpurple;
            }
        </style>
    </head>
    
    <body ondragover="allowDrop(event)" ondrop="drop(event)">
        <div class="box" ondragover="allowDrop(event)" ondrop="drop(event)">
            <div id="inner" draggable="true" ondragstart="drag(event)"></div>
        </div>
        <div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
        <div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
        <script>
            /* 拖起inner触发 */
            function drag(e) {
                /* 将被托起的元素id存到dataTranfer里面 */
                e.dataTransfer.setData('id', e.target.id);
            }
            /* 取消box的默认设置,否则drop没反应 */
            function allowDrop(e) {
                e.preventDefault();
            }
            /* 放置元素 */
            function drop(e) {
                /* 获取拖拽元素id,放置到当前元素内部 */
                let id = e.dataTransfer.getData('id');
                e.target.appendChild(document.getElementById(id))
            }
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    android学习日记19--四大组件之BroadcastReciver(广播接收者)
    android学习日记19--四大组件之Services(服务)
    android学习日记18--Adapter简介
    android学习日记17--Gallery(画廊视图)
    android学习日记16--GridView(网格视图)
    android学习日记15--WebView(网络视图)
    android学习日记14--网络通信
    android报错及解决2--Sdcard进行文件的读写操作报的异常
    android学习日记13--数据存储之File存储
    自定义跨浏览器的事件处理程序
  • 原文地址:https://www.cnblogs.com/aeipyuan/p/12783494.html
Copyright © 2011-2022 走看看