JavaScript拖拽API的简单使用

演示效果:

 

<!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>
        .father {
            display: flex;
        }

        #box1,
        #box2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        #box2 {
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div id="box1"></div>
        <div id="box2">
            <!-- 将图片设置为可拖拽状态 -->
            <img id="pic" draggable="true" src="./images/car.png">
        </div>
    </div>

    <script>
        const box1 = document.querySelector('#box1');
        const pic = document.querySelector('#pic');

        // 将鼠标指针悬停在box1元素上,并拖拽其他元素时
        box1.addEventListener('dragover', e => {
            e.preventDefault(); // 阻止默认行为
        })

        // 当拖放操作在目标元素上执行时触发
        box1.addEventListener('drop', e => {
            const id = e.dataTransfer.getData('text/plain'); // 获取拖拽数据
            e.target.appendChild(document.getElementById(id)); // 将拖拽的元素添加到目标元素中
        })

        // 拖放开始时触发
        pic.addEventListener('dragstart', e => {
            console.log('开始拖拽', e);
            e.dataTransfer.setData('text/plain', e.target.id); // 设置拖拽数据
        })

        // 拖放操作结束时触发
        pic.addEventListener('dragend', e => {
            console.log('结束拖拽', e);
        })
    </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/670333.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于JSP的九宫格日志网站

你好呀&#xff0c;我是学长猫哥&#xff01;如果有需求可以文末加我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;浏览器/服务器&#xff08;B/S&#xff09;结构 系统展示 首页 管理员功能模块 用户功能模块 摘要 本…

2024年春季学期《算法分析与设计》练习13

问题 A: 菱形图案 [命题人 : admin] 时间限制 : 1.000 sec 内存限制 : 128 MB提交问题列表 解决: 1041提交量: 2744统计 题目描述 KiKi学习了循环&#xff0c;BoBo老师给他出了一系列打印图案的练习&#xff0c;该任务是打印用“*”组成的菱形图案。 输入 多组输入&…

[数据集][目标检测]脑肿瘤检测数据集VOC+YOLO格式9787张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;9787 标注数量(xml文件个数)&#xff1a;9787 标注数量(txt文件个数)&#xff1a;9787 标注…

基础—SQL—DQL(数据查询语言)聚合函数

一、引言 一般情况下&#xff0c;我们在进行分组查询的时候&#xff0c;一般配合着聚合函数来进行操作&#xff0c;所以先了解和学习聚合函数再学习和操作分组查询。 二、DQL—聚合函数 1、介绍 聚合函数指的是讲一列数据作为一个整体&#xff0c;进行纵向的计算。 2、常见…

VMWare下安装Linux虚拟机(图文)

大家好&#xff0c;在当今科技发展迅速的时代&#xff0c;虚拟化技术在企业和个人用户中变得越来越普遍。VMware作为一款领先的虚拟化软件&#xff0c;为用户提供了在单一物理计算机上运行多个操作系统的能力&#xff0c;为开发、测试和运维等任务提供了便利。在这篇文章中&…

Linux Shell:lsof 命令

Linux Shell&#xff1a;lsof 命令 在 Linux 系统中&#xff0c;lsof&#xff08;list open files&#xff09;命令是一款非常有用的工具。它可以列出当前系统中所有打开的文件&#xff0c;并且还能显示与这些文件相关的进程信息。因为在 Linux 中&#xff0c;一切皆文件&…

汽车IVI中控开发入门及进阶(二十五):CVBS视频流

前言: AHD和CVBS是两种视频格式,在车载摄像头中,有支持传统CVBS模拟视频的摄像头,也有支持新的高分辨率AHD格式的摄像头。 CVBS视频是经典的模拟视频格式,在视频经常显示在小型监视器上的车辆上仍然最受欢迎。如果想要车辆的最大分辨率,可选择AHD格式,即高分辨率模拟视…

生成随机图片

package com.zhuguohui.app.lib.tools;/*** Created by zhuguohui* Date: 2024/6/1* Time: 13:39* Desc:获取随机图片*/ public class RandomImage {// static final String url "https://picsum.photos/%d/%d?random%d";static final String url "https://…

Java进阶学习笔记34——Arrays类

Arrays&#xff1a; 用来操作数组的工具类。 解释说明&#xff1a; 只要知道代码这么写就可以了。 package cn.ensource.d5_arrays;import java.util.Arrays; import java.util.function.IntToDoubleFunction;public class ArraysTest1 {public static void main(String[] arg…

“论软件的可靠性评价”必过范文,突击2024软考高项论文

论文部分 摘要 2023年03月&#xff0c;我参与了某艺术品公司线上拍卖管理平台的研发。该项目的目标是建立一个互联网在线拍卖平台&#xff0c;用户可以通过手机或PC浏览器进入拍卖平台&#xff0c;对喜欢的拍品进行参拍出价。平台提供了在线支付、在线出价、保证金管理、拍品…

docker镜像体积优化攻略参考—— 筑梦之路

简单介绍 镜像的本质是镜像层和运行配置文件组成的压缩包&#xff0c;构建镜像是通过运行 Dockerfile 中的 RUN 、COPY 和 ADD 等指令生成镜像层和配置文件的过程。 和镜像体积大小有关的关键点&#xff1a; RUN、COPY 和 ADD 指令会在已有镜像层的基础上创建一个新的镜像层&…

PolarCTF 2024夏季个人挑战赛 个人WP

【WEB】审计 直接给源码&#xff0c;php特性 秒了&#xff0c;有个特殊的东西 0e215962017&#xff0c;他md5后的值是本身 【WEB】扫扫看 敏感目录flag.php 【WEB】debudao 查看网页源码&#xff08;里面的flag是错的&#xff09; 查看网络 【WEB】ExX? 开题 扫一下&#…

Unity实现拖拽场景中的物体

先看演示效果 实现方案 1.创建几个用于演示的Cube 2.创建一个脚本 3.编写脚本的内容 附上代码片段 float distance;// Update is called once per framevoid Update(){var ray Camera.main.ScreenPointToRay(Input.mousePosition);RaycastHit hit;if (Input.GetMouseButtonDo…

施耐德 BAS PLC 基本操作指南

CPU 型号 项目使用的 PLC 型号为&#xff1a;施耐德昆腾 Quantum 140 CPU 67160 P266 CPU &#xff0c;支持热备冗余&#xff0c;内部存储 1024K&#xff0c;支持 2 个 PCMCIA 扩展卡槽CPU 模块自带接口&#xff1a;MB 串口接口、MB 串口接口、USB 接口、以太网接口&#xff…

网络原理———TCP/IP—网络层IP协议

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 今天你敲代码了吗 目录 网络层IP协议4位版本号4位首部长度8位服务类型16位总长度16位标识 3位标志 13位片偏移8位生存时间8位协议16位首部校验和32位源IP地址 和 32位目的IP地址方案1:动态分配IP地址方案2:NAT机…

RabbitMQ怎么保证可靠性

RabbitMQ怎么保证可靠性 前言生产端问题解决方案代码验证 RabbitMQ问题消费端问题解决方案代码验证 总结 前言 RabbitMQ相信大家都非常熟悉了&#xff0c;今天咱们来聊聊怎么保证RabbitMQ的可靠性。 那什么时候会出现问题呢&#xff1f; 第一种是生产端出现的问题。我们向队…

[数据集][目标检测]手枪检测数据集VOC+YOLO格式3000张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3000 标注数量(xml文件个数)&#xff1a;3000 标注数量(txt文件个数)&#xff1a;3000 标注…

IP代理池是什么?

从事跨境行业的朋友们总会有一个疑问&#xff0c;为什么自己所合作的IP代理商的IP在使用的过程中账号会有莫名封禁的问题&#xff0c;会不会是自己在使用的过程中错误的操作违反了平台的规则&#xff0c;其实不然有可能会是IP代理池纯净度不高的问题&#xff0c;有可能自己在使…

[个人总结]-java常用方法

1.获取项目根路径 user.dir是一个系统属性&#xff0c;表示用户当前的工作目录&#xff0c;大多数情况下&#xff0c;用户的当前工作目录就是java项目的根目录&#xff08;src文件的同级路径&#xff09; System.getProperty("user.dir") 结果&#xff1a;D:\code…

智能报警器——物联网应用创新

一、项目的目的、意义 我国自2020年至11月起共接报火灾23.3万起&#xff0c;亡1335人&#xff0c;伤837人&#xff0c;直接财产损失36.12亿元&#xff0c;其中&#xff0c;因电线短路、过负荷及电气设备故障等电气原因引起的火灾共40481起&#xff0c;占火灾总数的30.7%&#…