如何用js实现一个拖拽效果
这篇文章主要介绍“如何用js实现一个拖拽效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何用js实现一个拖拽效果”文章能帮助大家解决问题。
创新互联建站-专业网站定制、快速模板网站建设、高性价比山阴网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式山阴网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖山阴地区。费用合理售后完善,十余年实体公司更值得信赖。
准备
这里我们要用到字体图标,所以我们从iconfont阿里图标库直接引入
找到需要的图标,添加进项目
找到图标所在的项目,点击查看链接
复制地址,或者点击地址复制跳转后地址链接
复制代码
创建所需要结构
把我们需要结构先写出来
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编写拖拽效果
首先获取需要用到的元素
// 获取整个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实现一个拖拽效果
URL分享:http://pwwzsj.com/article/poihpi.html