图片拖放、localStorage存储、sessionStorage存储

伯思

于 2022-07-19 17:31:33 发布

阅读量349

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/hbl020305/article/details/125875691

版权

本文介绍了HTML5中的拖放功能，包括ondragstart、ondragover、ondrop和draggable属性的使用，展示了如何实现图片拖放到指定区域并保持状态。此外，文章还探讨了localStorage和sessionStorage两种本地存储方式，强调了localStorage用于持久存储，sessionStorage则在页面会话结束后清除。通过示例代码解释了localStorage的写法及其在浏览器中的查看方法。

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

一、拖放

在HTML5中，拖放是标准的一部分，任何元素都能拖放，想要实现拖放，我们至少要了解这几个属性：
1、ondragstart
ondragstart这个属性表示拖放开始
2、ondragover
ondragover这个属性表示拖放结束
3、ondrop
ondrop表示拖放过程

看了这三个属性，相信朋友们已经有了思路了，但是还有一个问题，大部分属性默认是不可拖动的，那么如果碰到不可拖动的元素怎么办呢？那就需要用到下面这个属性：
draggable=“true”draggable：规定元素是否可拖放 true为可拖放 false为不可拖放默认值为false。

举例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid #000;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <!-- 
        ondragstart:表示拖放开始
        ondrop：表示拖放过程
        ondragover：表示拖放结束
     -->
    <div class="box" ondrop="drop(event)" ondragover="over(event)"></div>
    <!-- draggable：规定元素是否可拖放 true为可拖放 false为不可拖放 默认值为false -->
    <img src="img/navsprites_hover.gif" alt="" draggable="true" ondragstart=