手摸手带你撸一个拖拽效果

news2024/11/14 13:25:56

目录

前言

准备

创建所需要结构

编写样式

js编写拖拽效果

解释方法

所有代码

结尾


前言

最近看见一个拖拽效果的视频,看好多人评论说跟着敲也没效果,还有就是作者也不回复大家提出的一些疑问,本着知其然必要知其所以然的心理,我把实现效果研究了一遍,并且了解了其实现原理,这里给大家复盘其原理,学到就是赚到

准备

这里我们要用到字体图标,所以我们从iconfont阿里图标库直接引入

  • 找到需要的图标,添加进项目
  • 找到图标所在的项目,点击查看链接
  • 复制地址,或者点击地址复制跳转后地址链接

<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2579455_c6xlnvkj0j.cssspm=a313x.7781069.1998910419.53&file=font_2579455_c6xlnvkj0j.css">
复制代码

创建所需要结构

把我们需要结构先写出来

  • draggable:让盒子可以进行拖拽
  • style="--color:#e63e31"--color让盒子背景色根据--color显示(与下方css样式相联系)
 <div class="list">
        <div class="list-item" draggable="true" style="--color:#e63e31">
            <i class="iconfont icon-shuangyuzuo constellation"></i>
            <span class="list-item-title">双鱼座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#70d265">
            <i class="iconfont icon-shuipingzuo constellation"></i>
            <span class="list-item-title">水平座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#f0e941">
            <i class="iconfont icon-mojiezuo constellation"></i>
            <span class="list-item-title">摩羯座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#da8218">
            <i class="iconfont icon-chunvzuo constellation"></i>
            <span class="list-item-title">处女座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#7ff0ec">
            <i class="iconfont icon-shizizuo constellation"></i>
            <span class="list-item-title">狮子座</span>
        </div>
    </div>
复制代码

编写样式

这里直接采用flex对盒子进行排版布局

  • background-color: var(--color);var(--color)是或者自定义属性的颜色
body{
  background-color: #000;
}
.list{
  width: 300px;
  height: 360px;
  /* padding: 20px 0; */
  margin: 100px auto 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.list-item{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 10px;
  /* margin-bottom: 20px; */
background-color: var(--color);
}
.constellation{
  line-height: 2.5em;
  font-size: 20px;
  color: #fff;
}
.list-item-img{
  width: 30px;
  height: 30px;
}
.list-item-title{
  margin-left: 20px;
  color: #fff;
}
// 移动动画class
.list-item.moving{
background-color: transparent;
border: 2px dashed #ccc;
}
复制代码

js编写拖拽效果

首先获取需要用到的元素

// 获取整个list
const list = document.querySelector('.list')
// 获取每一个盒子
const item = document.querySelectorAll('.list-item')
复制代码

开始拖动的时候需要加上移动的类,并且设置移动效果

// 开始拖动
    list.ondragstart = e => {
        source_node = e.target
        recode(item)
        setTimeout(() => {
        // 拖拽时样式
            e.target.classList.add('moving')
        }, 0)
        // 设置拖动效果
        e.dataTransfer.effectAllowed = 'move'
    }
复制代码

拖拽中需要判断是从上往下还是从下往上,根据拖拽元素和放入元素的索引进行比对,从而对拖拽元素进行插入节点操作

注意: 在码上掘金从上往下的时候会出现bug,在浏览器不会,我个人觉得应该是是码上掘金的问题

 // 拖拽放入有效目标触发
    list.ondragenter = e => {
        e.preventDefault()
        console.log(e.target.id, list)
        if (e.target === list || e.target === source_node) {
            return false
        }
        const childer = Array.from(list.children)
        const sourceIndex = childer.indexOf(source_node)
        const targetIndex = childer.indexOf(e.target)
        // console.log(sourceIndex, targetIndex)
        if (sourceIndex < targetIndex) {
            // 从下往上拖动
            list.insertBefore(source_node, e.target.nextElementSibling)
        } else {
            // 从上往下拖动
                list.insertBefore(source_node, e.target)
        }
        // 动画效果函数
        last([e.target, source_node])
    }
复制代码

拖拽结束后把拖拽时的样式移除

// 拖放结束
    list.ondragend = e => {
        e.target.classList.remove('moving')
    }
复制代码

解释方法

这里有好多没有用过或者比较少用的方法,这里给大家解释一下

  • ondragstart:当用户开始拖动一个元素或文本选择时,会触发dragstart事件
  • ondragover:当元素或文本选择被拖到有效的拖放目标上时(每几百毫秒一次),就会触发拖放事件
  • ondragenter:当被拖动的元素或文本选择进入有效的拖放目标时,会触发dragenter事件
  • ondragend: 当拖放操作结束时(通过释放鼠标按钮或点击escape键)触发dragend事件。
  • e.dataTransfer.effectAllowed:用于设置拖放时的效果,常用参数有(move,link,copy)
  • getBoundingClientRect:返回元素对于视口的信息
  • requestAnimationFrame:重绘动画
  • cancelAnimationFrame:用于取消requestAnimationFrame调用请求

所有代码

结尾

此次小案例主要是让我们了解并运用draggable属性,及一些拖拽方法的学习,学到就是赚到,欢迎大家找我沟通交流,一起学习

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【疯狂世界杯】css 动画实现跳动的足球

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;…

python T检验

T检验通常分为三种&#xff1a;单样本T检验、双样本T检验、配对样本T检验原理可以参考&#xff1a;一文详解t检验本文主要介绍使用python实现T检验的过程&#xff0c;内容主要是参考这篇博文&#xff1a;利用python库stats进行t检验 文章目录一、单样本T检验二、独立样本t检验&…

二、Git本地仓库基本操作——创建Git仓库、提交更新或删除文件

1. 创建本地工作仓库 创建本地工作仓库有两种方法&#xff1a; git init 在本地初始化一个git仓库git clone 直接克隆一个远程的git仓库 方法一&#xff1a; 我们在其中一个目录下&#xff0c;点击鼠标右键&#xff0c;然后启动git bash。输入下面命令&#xff1a; git in…

【实战案例】Python 信用卡欺诈检测其实特简单

当我们在网上购买产品时&#xff0c;很多人喜欢使用信用卡。但信用卡欺诈常常会在身边发生&#xff0c;网络安全正成为我们生活中至关重要的一部分。 为了解决这个问题&#xff0c;我们需要利用机器学习算法构建一个异常行为的识别系统&#xff0c;如果发现可疑&#xff0c;中…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java高校饭堂管理系统8gmjo

这个选题的话其实有很多的&#xff0c;就看你自己能接受怎么样的&#xff0c;比如可以做网站类、系统类、小程序类、安卓app、大数据类等等&#xff0c;这个也要看你个人能力和技术问题&#xff0c;如果技术小白或者有一点点基础的话建议选择网站类和系统类的&#xff0c;如果有…

微服务框架 SpringCloud微服务架构 10 使用Docker 10.2 镜像命令练习

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构10 使用Docker10.2 镜像命令练习10.2.1 练习10 使用Docker 10.2 镜像命令…

Spring boot 自动装配原理

Spring boot 为了解决Bean的复杂配置&#xff0c;引入了自动装配机制&#xff1b;那么什么是自动装配&#xff0c;它的原理又是什么呢&#xff1f;我们先通过以下例子来了解以一下什么是自动装配。 Spring boot 集成 redis 引入依赖包 <dependency><groupId>org…

CTFShow pwn07 (ret2libc-64bit

用ROPgabdet 找到pop rdi地址和ret地址&#xff1a; 来自ctfshow pwn7&#xff1a; 64位程序是需要栈平衡的&#xff0c;而且前六个寄存器用完了才会用栈传参 %rdi&#xff0c;%rsi&#xff0c;%rdx&#xff0c;%rcx&#xff0c;%r8&#xff0c;%r9 用作函数参数&#xff0c;依…

rust编程-rust所有权理解(chapter 4.1)

目录 1. 什么是所有权 1.1 堆与栈 1.2 变量作用域 1.3 String类型 1.4 内存和分配 1.5 变量和数据交互的方式 1.5 所有权和函数 1.6 返回值和作用域 所有权 是Rust独有的特性&#xff0c;该设计开创了编程语言中的先河。所有权使得Rust能保证内存的安全&#xff0c;且不…

游程编码(Run Length Coding)

游程编码游程编码基本介绍示例1示例2游程编码适用的场景游程编码 游程编码&#xff08;Run Length Coding&#xff0c;简称RLC&#xff09;又称游程编码、行程长度编码、变动长度编码 等&#xff0c;是一种统计编码。主要技术是检测重复的比特或字符序列&#xff0c;并用它们的…

亚马逊云科技re:Invent 2022 Ruba Borno主题演讲

2022亚马逊云科技re:Invent全球大会精彩内容应接不暇&#xff0c;亚马逊云科技全球渠道与联盟副总裁Ruba Borno在2022亚马逊云科技re:Invent大会的全球合作伙伴峰会上&#xff0c;为合作伙伴带来一系列全新的合作伙伴创新服务。 云上发展持续加速的当下&#xff0c;上云好比一场…

使用Fiddler对手机App抓包

目录 一、查看 Fiddler 的 ip 地址 二、设置 Fiddler 允许远程连接 三、进行手机端 App 的抓包 3.1.准备工作 3.2.手机设置 3.3.安装根证书 四、可能会遇到的问题 一、查看 Fiddler 的 ip 地址 有两种方法都可以查询到。 第一种方法&#xff1a; 打开 Fiddler&#xff…

[附源码]计算机毕业设计springboot在线招聘网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

一分钟带你了解音视频开发进阶(先收藏了)

FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发学习路线 随着基础设施的完善&#xff08;光纤入户、wifi覆盖、5G普及&#xff09;的影响&#xff0c;将短视频、直播、视频会议、在线教育、在线医疗瞬间推到了顶峰&#xff0c;人们对音视频的需求和要求也越来越强烈 音视…

实现java项目idea打包发布至服务器(完整版)

问题&#xff1a;如何快速部署本地代码到服务器&#xff1f; 今天介绍的是使用idea的一款插件(Alibaba Cloud Toolkit)实现&#xff0c;首先需要在自己的服务器上安装运行环境&#xff0c;包括&#xff1a;jdk、maven、mysql等&#xff0c;这些操作就不详细说了&#xff0c;可…

Inductive Representation Learning on Large Graphs 论文/GraphSAGE学习笔记

1 动机 1.1 过去的方法 现存的方法大多是transductive的&#xff0c;也就是说&#xff0c;在训练图的时候需要将整个图都作为输入&#xff0c;为图上全部节点生成嵌入&#xff0c;每个节点在训练的过程中都是可知的。举个例子&#xff0c;上一次我学习了GCN模型&#xff0c;它…

考研数据结构大题整合_组三(LZH组)

考研数据结构大题整合 目录考研数据结构大题整合三、LZH组LZH 组一LZH 组二LZH 组三LZH 组四LZH 组五LZH 组七三、LZH组 LZH 组一 给出如图所示的无向图G的邻接矩阵和邻接表两种存储结构. &#xff08;2&#xff09;解答下面的问题&#xff08;6分&#xff09; &#xff08;…

二、进程管理(五)死锁

目录 5.1死锁的定义和产生条件 5.2死锁的处理策略 5.2.1死锁预防 5.2.2死锁避免 5.2.3死锁检测和解除 5.1死锁的定义和产生条件 在并发环境下&#xff0c;各进程因竞争资源而造成的一种互相等待对方手里的资源&#xff0c;导致各进程都阻塞&#xff0c;都无法向前推进的现…

【GlobalMapper精品教程】034:创建漫游动画并制作漫游视频的方法

本实例讲解在globalmapper中根据路径创建漫游动画,并制作漫游视频的方法。 文章目录 一、绘制漫游路径二、创建3D虚拟漫游三、播放虚拟漫游四、保存虚拟漫游实验数据可以是点云数据、DEM、三维模型等,本文加载数字表面模型DSM进行演示。 一、绘制漫游路径 同创建矢量线状数据…

海带软件分享——日常办公学习软件分享(收藏)

>>>深度学习Tricks&#xff0c;第一时间送达<<< &#x1f680; 写在前面 &#x1f431;‍&#x1f3cd; 本期开始&#xff0c;小海带会定期推荐一些日常办公学习软件及趣味网址&#xff0c;供大家交流参考 ~ 小伙伴们记得一键三连喔&#xff01;&#x1f6…