绵阳梓潼网站制作公司

如何用js实现一个拖拽效果

这篇文章主要介绍“如何用js实现一个拖拽效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何用js实现一个拖拽效果”文章能帮助大家解决问题。

创新互联建站-专业网站定制、快速模板网站建设、高性价比山阴网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式山阴网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖山阴地区。费用合理售后完善，十余年实体公司更值得信赖。

准备

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

  • 找到需要的图标，添加进项目

  • 找到图标所在的项目，点击查看链接

  • 复制地址，或者点击地址复制跳转后地址链接

如何用js实现一个拖拽效果

复制代码

创建所需要结构

把我们需要结构先写出来

  • draggable:让盒子可以进行拖拽

  • style="--color:#e63e31"--color让盒子背景色根据--color显示（与下方css样式相联系）

 
        

           
           双鱼座
       

       

           
           水平座
       

       

           
           摩羯座
       

       

           
           处女座
       

       

           
           狮子座
       

   
复制代码

编写样式

这里直接采用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实现一个拖拽效果

js编写拖拽效果

首先获取需要用到的元素

// 获取整个listconst 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调用请求

关于“如何用js实现一个拖拽效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。


文章标题：如何用js实现一个拖拽效果
本文来源：http://myzitong.com/article/poihpi.html

其他资讯