HTML5元素拖放与Web Storage

2022-08-10 12:26:47

一、元素拖放事件

1、概念

        在 HTML5 中增加了多个针对元素拖放的事件,使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作,要想真正实现拖放后进行数据交互,还需要结合dataTransfer对象,才能真正实现拖放效果。

注意:要实现元素拖放,首先要在目标元素上 设置draggable = “true” ,否则无法实现拖放。

2、事件

在拖动目标上触发事件 (源元素):

  • ondragstart - 用户开始拖动元素时触发
  • ondrag - 元素正在拖动时触发(鼠标可能在移动也可能未移动)
  • ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

  • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

二、dataTransfer 对象

1、概念

dataTransfer 对象是事件对象的一个属性,用来暂时存放被拖放的数据,只能在拖放事件的处理程序中访问该对象。不过目前不同的浏览器对该对象的支持情况不同,所以下面以谷歌浏览器为标准说明。

如何在拖动的源对象事件和目标对象事件间传递数据

1. HTML5为所有的拖动相关事件提供了一个新的属性dataTransfer :
    e.dataTransfer { }          //数据传递对象
    功能:用于在源对象和目标对象的事件间传递数据

2. 源对象上的事件处理中保存数据:
    e.dataTransfer.setData( k,  v );     //k-v必须都是string类型

3. 目标对象上的事件处理中读取数据:
    var v = e.dataTransfer.getData( k );

2、方法

① setData(format,data)

该方法用来将指定格式的数据存储在 dataTransfer 对象中,参数 format 定义数据类型,data 定义要存储的数据。

// 将被拖动对象的id属性 以 text 类型存储到 dataTransfer 对象中 event.dataTransfer.setData("text",event.target.id);

② getData(format)

该方法用来从 dataTransfer 对象中获取指定格式的数据。参数 format 定义要读取数据的类型,如果指定的数据类型不存在,则返回空字符串或报错。

 // 从 dataTransfer 对象中读取出 text 类型的数据,赋值给变量 var data = event.dataTransfer.getData("text");

 三、拖动案例

案例1展示:

代码如下:

<p>请将下面图片拖入到框中</p>
<!-- 
    ondragstart:该事件表示拖放开始
    ondragover:该事件表示拖放结束
    ondrop:该事件表示拖放过程
 -->
<div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
<!-- draggable:值为true时表示元素可以拖动,默认为false,表示不能拖动 -->
<img src="./img/flower.jpg" id="img1" alt="" draggable="true" ondragstart="drag(event)">
<script type="text/javascript">
    // 用于拖放的函数 拖动已开始
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    // 拖动过程
    function drop(ev){
        // 允许其他元素拖放到此处
        ev.preventDefault();
        // 获取要拖放元素的id
        var id = ev.dataTransfer.getData("Text");
        // 将一个标签添加到另外一个标签中,可以使用appendChild();
        ev.target.appendChild(document.getElementById(id));
    }
    // 拖动结束
    function allowDrag(ev){
        // 允许其他元素拖放到此处
        ev.preventDefault();
    }
</script>

 案例2展示:

代码如下:

<p>请将下面图片拖入到框中来回拖放</p>
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)">
        <img src="./img/flower.jpg" id="img1" alt="" draggable="true" ondragstart="drag(event)">
    </div>
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
    <!-- draggable:值为true时表示元素可以拖动,默认为false,表示不能拖动 -->
    <script type="text/javascript">
        // 用于拖放的函数 拖动已开始
        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        // 拖动过程
        function drop(ev){
            // 允许其他元素拖放到此处
            ev.preventDefault();
            // 获取要拖放元素的id
            var id = ev.dataTransfer.getData("Text");
            // 将一个标签添加到另外一个标签中,可以使用appendChild();
            ev.target.appendChild(document.getElementById(id));
        }
        // 拖动结束
        function allowDrag(ev){
            // 允许其他元素拖放到此处
            ev.preventDefault();
        }
    </script>

四、了解Web Storage简介

Web Storage API两个关键的对象:window.localStorage对象(本地存储)和window. sessionStorage对象(区域存储)

  • localStorage -用于长久保存整个网站的数据,保存的数据潦有过期时间,直到手动去除。
  • sessionStorage -用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

Web Storage的特点:

  • 设置数据和读取数据比较方便
  • 容量较大,sessionStorage约5M,localStorage约20M
  • 只能存储字符串,如果要存储SON对象,可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。

 五、了解localStorage使用

方法&属性描述
setltem(key,value)该方法接收一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值
getltem(key)该方法接收一个键名作为参数,返回键名对应的值
romoveltem(key)该方法接收一个键名作为参数,并把该键名从存储中删除
length类似数组的length属性,用于访问Storage对象中item的数量。
key(n)用于访问第n个key的名称
clear()清除当前域下的所有localSotrage内容
  • 作者:小媛同学.,
  • 原文链接:https://blog.csdn.net/m0_61843988/article/details/125876436
    更新时间:2022-08-10 12:26:47