首页 > 其他分享 >记录--手摸手带你撸一个拖拽效果

记录--手摸手带你撸一个拖拽效果

时间:2023-03-03 17:44:23浏览次数:76  
标签:node target source -- list color item 拖拽 手带

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

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

准备

这里我们要用到字体图标,所以我们从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调用请求

所有代码

HTML

<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>

JS

// 操作dom元素
    const list = document.querySelector('.list')
    const item = document.querySelectorAll('.list-item')

    // 判断当前元素
    let source_node
    // 开始拖动
    list.ondragstart = e => {
        source_node = e.target
        recode(item)
        setTimeout(() => {
            e.target.classList.add('moving')
        }, 0)
        // 设置拖动效果
        e.dataTransfer.effectAllowed = 'move'
    }
    // 拖动在有效目标
    list.ondragover = e => {
        // 防止默认情况下允许删除
        e.preventDefault()
    }
    // 拖拽放入有效目标触发
    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) {
            // 从下往上拖动
            //  console.log(source_node,e.target.nextElementSibling)
            //  if()
            list.insertBefore(source_node, e.target.nextElementSibling)
        } else {
            // 从上往下拖动
             console.log(e.target,e.target)
            if (!e.target==null||source_node==null) {
                return
            }
                list.insertBefore(source_node, e.target)
        }
        last([e.target, source_node])
    }
    // 拖放结束
    list.ondragend = e => {
        e.target.classList.remove('moving')
    }
    // 重新计算位置
    function recode(eleAll) {
        // getBoundingClientRect 返回元素对于视口信息
        for (let i = 0; i < eleAll.length; i++) {
            const {
                top,
                left
            } = eleAll[i].getBoundingClientRect()
            eleAll[i]._top = top
            eleAll[i]._left = left
        }
    }
    // 添加移动动画效果
    function last(eleAll) {
        for (let i = 0; i < eleAll.length; i++) {
            const dom = eleAll[i]
            const {
                top,
                left
            } = dom.getBoundingClientRect()
            if (dom._left) {
                dom.style.transform = `translate3d(${dom._left-left}px,${dom._top-top}px,0px)`
                // 重绘动画
                let rafId = requestAnimationFrame(function () {
                    dom.style.transition = `transform 0.3s ease-out`
                    dom.style.transform = 'none'
                })
                dom.addEventListener('transitionend', () => {
                    dom.style.transition = 'none'
                    // 取消requestAnimationFrame调用请求
                    cancelAnimationFrame(rafId)
                })
            }
        }
    }

CSS

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;
}
.list-item.moving{
background-color: transparent;
border: 2px dashed #ccc;
}

本文转载于:

https://juejin.cn/post/7171269067729272868

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

标签:node,target,source,--,list,color,item,拖拽,手带
From: https://www.cnblogs.com/smileZAZ/p/17176470.html

相关文章

  • 10. 共用体
    一、什么是共用体  共用体也称为联合体,它使几种不同类型的变量存放到同一段内存单元中。所以共用体在同一时刻只能有一个值,它属于某一个数据成员。由于所有成员都位于同......
  • 本地远程连接Oracle数据库的实现步骤
    1.instantclient工具下载安装Oracle数据库的客户端连接工具“instantclient”,该工具是远程连接Oracle数据库的前提,不管是使用PL/SQL或应用程序访问数据库都必须安装该工......
  • 实验一
    task1程序源码#include<stdio.h>#include<stdlib.h>intmain(){ printf("o\n"); printf("<H>\n"); printf("II\n"); system("pause"); return0;}图片......
  • 吴恩达学习笔记5 ()
    2023-03-0315:18:40星期五正规方程(Normalequationwithmultiplevariable)对于某些线性回归问题,可以用更好的方法求得参数\(\theta\)的最优值梯度下降算法......
  • 判断某个值是否存在指定枚举类中
    publicenumPayRecordPayWayEnum{BALANCE(1,"余额"),//1:余额ALI(2,"支付宝"),//2:支付宝WECHAT(3,"微信"),//3:......
  • 集合进阶内容
    集合进阶1.3Collection集合概述和使用【应用】Collection集合概述是单例集合的顶层接口,它表示一组对象,这些对象也称为Collection的元素JDK不提供此接口的任何直......
  • 福特FORD EDI流程指南
    在此前的文章:福特FORDEDI需求分析中,我们为大家介绍了福特FORD的EDI平台——GECHub。与福特FORD建立EDI连接需要基于这个平台来进行。供应商通过GECHub与福特建立EDI连......
  • 不会代码的你也能一键批量采集数据
    背景描述最近需要收集百度搜索查询结果,可是使用的时候,发现之前的python脚本程序失效了。这使我无法批量采集所需的关键词数据。问题描述启动python脚本程序后,获取的数......
  • ISP(图像信号处理)算法概述、工作原理、架构、处理流程
    目录ISP的主要内部构成:ISP内部包含CPU、SUPIP(各种功能模块的通称)、IF等设备ISP的控制结构:1、ISP逻辑2、运行在其上的firmwareISP上的Firmware包含三部分:AP对ISP......
  • 用户级线程和内核级线程
    用户级线程的特点:不需要修改内核代码,内核不知道线程的存在,所有的线程管理都由应用程序管理。用户级线程的优点:所有的线程都在用户空间,所以它在切换线程时不需要从用户态切......