angular实现图片上移下移操作_angular图片在一个区域内可以随意拖动-优快云博客

本文介绍了如何使用鼠标交互实现特定功能，包括鼠标悬停时显示提示信息并跳转页面，以及通过鼠标操作实现图片的上移和下移。详细解释了如何利用Angular的*ngFor指令和splice方法来轻松完成这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，第一个需求，鼠标放在logo上，要有提示“查看版本详情”点击LOGO，跳转到版本提示页面
实现方法：

<a [routerLink]="/a/b/c/d" title="查看版本详情">LOGO</a>
		//[routerLink]="/a/b/c/d"表示点击跳转到xxx页面
		//title表示将后面的字符串赋值给title，这里有一个坑，初学者容易写成[title]="查看版本详情"，这样子会报错

2，第二个需求，鼠标放在图片上，会显示图片上移和图片下移的字样，点击可以实现图片上移和下移
其实这个就是一个很简单的数组顺序的操作
在这里插入图片描述
用*ngFor指令循环渲染li，同时拿到index，这个时候的index重新赋值给了idx
在循环中插入两个i，那么进行渲染的时候就能把i同时渲染出来
用（click）=“方法名字”定义方法，然后把参数传过去，如图所示，定义了两个方法
MoveForwardImage(i ,idx)和方法MoveAfterImage(i ,idx)

接下来准备在ts里面写方法
思考：
1，实现这个功能，无非就是操作数组的顺序，数组前移，那么相对的数据也就会跟着移动，其实就是在点击事件里面，当点击了这个，然后执行代码
2，需要用到的方法splice（index ， index ， item），这个方法会返回删除掉的数据
index代表要删除的元素的下标，从什么位置开始删除
index代表要删除的个数，0为不删除
item代表从删除的位置添加进去的数据，可以添加多个
splice（2 ， 3 ， 5，6）代表了从下标为2的元素开始删除，删除3个，然后在删除的位置插入5和6，返回的数据是被删除的3个数据
3，要进行数据交换，才行
在这里插入图片描述
在方法外面定义一个函数swapArray（arr ， index1 ， index2）arr代表当前数组，index1是添加项目的位置下标，index2是删除项目的位置下标
只需要在点击事件里面调用swapArray（arr ， index1 ， index2）这个函数，做一些判断，在调用就OK