Html5中拖放API与WebStorage

最新推荐文章于 2024-09-27 16:51:59 发布

pocketful~

最新推荐文章于 2024-09-27 16:51:59 发布

阅读量118

点赞数

分类专栏： jQuery 文章标签： html5

本文链接：https://blog.csdn.net/Pocketful/article/details/107325947

版权

jQuery 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML5中的拖放API，包括如何启用拖放功能、拖放步骤及实例。同时，深入讲解了WebStorage，特别是前端开发中的登录逻辑、sessionStorage和localStorage的使用，以及它们的事件监听和相关方法。

摘要由CSDN通过智能技术生成

一、拖放API

1、介绍：

任何元素都能够拖放，并且支持浏览器与其他应用程序之间的数据的互相拖放，同时大大简化了拖放方面的相关代码。

2、拖放步骤：

将想要拖放的对象元素的draggable属性设为true,
另外img与a元素默认允许拖放编写与拖放相关的事件处理代码

3、步骤：

（1）

事件处理函数的声明（dragstart）
- 获取传输对象（.dataTransfer()）
- 设置id
在目标元素内移动（dragover）
- 默认事件发生（.preventDefault()）
将拖放元素放置到目标元素内
- 获取传输对象
- 通过getData获得id
- 通过id获得dom节点

（2）通过getELementsByClassName()获得拖放元素
（3）获取目标元素
（4）绑定事件：需要拿到每一个拖放元素去绑定
（5）绑定放置元素事件

4、例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 500px;
            border: 1px solid green;

        }
        .parent{
            height: 130px; 
            border: 1px solid red;
            margin: 10px;
        }
        .child{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <!-- 可以将五个child拖放到2个parent， 也可以将parent放到child中 -->
    <!-- 目标元素 -->
    <div class="parent"></div>
    <div class="parent"></div>
    <!-- 拖放元素 -->
    <div draggable="true" class="child" id="one">1</div>
    <div draggable="true" class="child" id="two">2</div>
    <div draggable="true" class="child" id="three">3</div>
    <div draggable="true" class="child" id="four">4</div>
    <div draggable="true" class="child" id="five">5</div>
    <script>
        window.onload=function(){
            //2、获取拖放元素
            var children=document.getElementsByClassName("child");
            //将children转换为数组
            children=Array.from(children);

            //3、获取目标元素
            var parents=document.getElementsByClassName("parent");
            //将parents转换为数组
            parents=Array.from(parents);

            //4、绑定事件
            //绑定拖放元素事件 需要拿到每一个的拖放元素去绑定
            children.forEach(function(item){
                //item ===>每一个拖放元素
                item.ondragstart=ds;
            })

            //5、绑定放置元素事件
            parents.forEach(function(item){
                item.ondragover=dov;
                item.ondrop=dr;
            })

            //当body中也绑定事件 当我们在parent中向外拖放child的时，把body设置为目标元素
            document.body.ondragover=dov;
            document.body.ondrop=dr;

            //1、事件处理函数的声明
            //dragstart 拖放开始事件
            function ds(event){
                //获取传输对象
                var dt=event.dataTransfer;
                //设置id setdata
                dt.setData("id",this.id);
                //6、设置拖放过程中的鼠标样式
                dt.effectAllowed="copy";
            }
            
            //dragover 在目标元素内移动
            function dov(event){
                //默认
                event.preventDefault();
                //阻止事件冒泡
                //event.stopPropagation();
                event.dataTransfer.dropEffect="copy";
            }

            //drop 将拖放元素放置到目标元素内
            function dr(event){
                //获取传输对象
                var dt=event.dataTransfer;
                //通过getData 拿到id
                var id=dt.getData("id");
                //通过id获取dom节点
                var dom=document.getElementById(id);
                //追加parent元素
                this.appendChild(dom);

                //阻止事件冒泡 防止拖拽时出现多个行为
               event.stopPropagation();
            }
        }
    </script>
</body>
</html>

二、WebStorage

1、前端开发登录逻辑：

使用JWT（Json Web Token用于通信双方之间传递安全信息的，简洁的URL安全的表述性声明规范，经常在跨域身份验证） token验证机制

2、两个种类

sessionStorage 与localStroage
在localStorage文件中获取sessionStorage文件中存的数据，跨选项获取数据是获取不到的；因为sessionStorage中的数据仅限当选项卡拿到；
在session Storage中能够获取localStorage数据，local Storage中是同样是跨选项卡存在的

3、WebStorage中的事件保存

<input type="text" id="data" placeholder="input data to save">
<button onclick="saveItem()">保存</button>
<script>
    //保存事件
    function saveItem(){
        var data=document.getElementById("data").value;
        console.log(data);
        //localStorage
        localStorage.setItem("data",data);
    }
</script>

4、WebStorage中的监听

（1）event.key 被修改的数据键值
（2）event.oldValue 被修改前的值
（3）event.newValue 被修改后的值
（4）event.url 页面的URL地址
（5）event.storageArea 为变动的sessionStorage对象或localStorage对象

5、session Storage中的方法

（1）.setItem（）：存放对象/数据
（2）.getItem（）：获取数据
（3）.removeItem（）：删除数据
（4）.clear（）：清除所有的数据
（5）.index（）：获取index对应的key值
（6）.length：获得storage中键值对数量

方法的使用

<script>
	//对比二者的输出
    console.log('sessionStorage',sessionStorage);
    console.log('localStorage',localStorage);
    
    // 存放一个键值对 (key : value) setItem
    sessionStorage.setItem('name', 'zhangsan')
    sessionStorage.setItem('age', 12)
    
    // 放对象
    // sessionStorage.setItem('obj', {name :'lisi', age: 13})
    // 我们可以通过过JSON.stringfy转换一下
    sessionStorage.setItem('obj', JSON.stringify({ name: 'lisi', age: 13 , token: '123321'}))

    // 取出对应key的value
    // 通过getItem(key) 拿到value
    var age = sessionStorage.getItem('age')
    console.log(age);
    var obj = sessionStorage.getItem('obj')
    // 取出来以后在转换成一个对象 JSON.parse
    console.log(obj);
    console.log(JSON.parse(obj));

   // removeItem(name) 删除由name指定的键值对
     sessionStorage.removeItem('name')

    // clear() 删除所有的值 一般用在 用户点击退出或注销的时候 将用户保存在sessionStorage中的所有信息全部清空 防止缓存影响其他用户操作
     sessionStorage.clear()

    // 获得index位置处的key
     console.log(sessionStorage.key(1));

    // 获取storage中的键值对数量
    console.log(sessionStorage.length);
    
    // 获取localStorage中的数据
    console.log(localStorage.getItem('gender'));
  </script>