zoukankan      html  css  js  c++  java
  • H5新增API--拖拽事件

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            ul,
            li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            
            ul {
                 100px;
                height: 100px;
                border: 2px solid #222;
            }
            
            li {
                 100%;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background-color: orange;
                border-bottom: 1px solid blue;
                cursor: pointer;
            }
            
            #box {
                 400px;
                height: 120px;
                border: 2px solid #222;
            }
        </style>
    </head>
    <body>
        <ul id="list">
            <li class="one">白日依山尽</li>
            <li class="two">黄河入海流</li>
            <li class="three">欲穷千里目</li>
            <li class="four">更上一层楼</li>
        </ul>
        <div id="box"></div>
    </body>
    <script>
        var list = document.getElementById('list');
        var lis = list.children;
        var box = document.getElementById('box');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('draggable', 'true');
            lis[i].ondragstart = function(e) {
                var e = e || window.event;
                // var lis_class = this.getAttribute('class');
                e.dataTransfer.setData('Text', this.className)
            }
        }
        box.ondragover = function(e) {
            var e = e || window.event;
            e.preventDefault();
        }
        box.ondrop = function(e) {
            var e = e || window.event;
            var data = e.dataTransfer.getData('Text');
            var ele = document.getElementsByClassName(data)[0];
            box.appendChild(ele);
        }
    </script>
    </html>
    
  • 相关阅读:
    数组下标索引的循环原来可以这样写
    移位运算>>与>>>
    java调用redis的多种方式与心得
    $.ajax传输js数组,spring接收异常
    div背景css样式笔记
    js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏
    设置系统时区
    安装与配置文本编辑器vim
    添加阿里云数据源
    spring controller获取web前端post数据乱码解决
  • 原文地址:https://www.cnblogs.com/lyly96720/p/12523562.html
Copyright © 2011-2022 走看看