【无标题】图片拖放累加

最新推荐文章于 2024-02-22 17:16:13 发布

骑驴闯红灯!

最新推荐文章于 2024-02-22 17:16:13 发布

阅读量42

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_72738258/article/details/125876144

版权

<div οndragοver="myFunction(event)"></div>

ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发。

默认情况下，数据/元素不能放置到其他元素中。如果要实现改功能，我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。

        ondragstart -用户开始拖动元素时触发

        ondrop   元素正在拖动时触发

        ondragend  用户完成元素拖动后触发

                ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件

                ondragover  当某被拖动的对象在另一对象容器范围内拖动时触发此事件

                ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件

                 ondrop 在一个拖动过程中，释放鼠标键时触发此事件

<!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>
        #result {
            width: 200px;
            height: 250px;
            border: 2px red solid;
        }
    </style>
</head>

<body>
    <p>请将下面图片拖到框里</p>

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

</html>

累加

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

<!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>
</head>

<body>
    <input type="button" value="点击点击" onclick="ty()">
    <div id="result"></div>
    <script text/javascript>
        function ty() {
            if (localStorage.y) {
                localStorage.y = parseInt(localStorage.y) + 1;
            } else {
                localStorage = 1;
            }
            document.getElementById("result").innerHTML = localStorage.y;
        }
    </script>
</body>

</html>