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

林恒 2023-03-28 原文

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

前言

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

准备

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

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

记录摸手 class list div JavaScript

有关记录--手摸手带你撸一个拖拽效果的更多相关文章

ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - 渲染另一个 Controller 的 View - 2
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby - Sinatra:运行 rspec 测试时记录噪音 - 2
Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/
ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。最佳答案
ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2
我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa
ruby - 用 Ruby 编写一个简单的网络服务器 - 2
我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b
ruby - 一个 YAML 对象可以引用另一个吗？ - 2
我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的rubyyaml解析器。这可能吗？最佳答案一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir