基本介绍 ?
- 在 web 页面中,如果需要改变多个元素的位置,可以通过元素拖动来实现。HTML5中加入了一个全局属性
draggable
,通过设置该属性的值为true/false
来控制元素是否可拖动。需要注意的是:- 链接和图片默认是可拖动的,可以通过将
draggable
设置为false
将他们变为不可拖动元素。 - Internet Explorer 8 及更早 IE 版本不支持
draggable
属性。
- 链接和图片默认是可拖动的,可以通过将
- 本文图片拖拽排序的实现主要利用了元素在拖放的过程中会触发的
ondragstart
、ondragend
和ondragover
事件,具体触发时机和其他事件可以参考 MDN,碍于篇幅,本文将不再进行阐述。
效果演示 ?
- 先看效果:
- 下面将介绍思路和具体的实现代码。
思路分析 ?
- 本文图片拖拽排序的实现主要利用了元素在拖放的过程中会触发的
ondragstart
、ondragend
和ondragover
事件。 - 通过监听
ondragstart
事件,将当前被拖动元素的数据保存下来,并给其增加特殊样式(设置元素的透明度和放大元素)。 - 通过监听
ondragend
事件,将上面一步设置在被拖动元素的特殊样式删除。为了减少内存消耗,我们把被拖动元素的ondragend
事件委托到最外层容器(事件委托) - 实现最重要的拖动排序功能,主要是为元素绑定
ondragover
事件。当ondragover
事件被触发时,需要获取当前鼠标的位置(event.clientX
,event.clientY
),计算出当前鼠标拖动到哪个元素上通过判断当前被拖动元素和其他元素的位置,从而实现元素的交换排序。 - 下面小节将介绍具体的实现代码。
具体实现 ?
基本布局
- 在实现拖拽功能之前,先完成基本布局:
/** index.tsx */ import React, { useMemo, useState } from 'react'; import styles from './index.module.scss'; // 每行多少列 const COLUMN = 4; // 每个元素宽度 const WIDTH = 120; // 每个元素高度 const HEIGHT = 80; // 图片左右 padding const IMAGE_PADDING = 5; const showList = [ { id: 2, name: 'osmo pocket', image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605703865983&di=a35a43a3b9e866f1ee0048563bfd2577&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2F5d8f2523322e3f4de91021701e95182c.jpeg', }, { id: 4, name: 'mavic pro', image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=787082346,3090178555&fm=15&gp=0.jpg', }, { id: 1, name: 'mavic mini2', image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605703111703&di=59fa621eb1e7f8f4285b95df80e11fd0&imgtype=0&src=http%3A%2F%2Fp1.itc.cn%2Fimages01%2F20201105%2F600892c32d524b99a118ea56cdf3c211.png', }, { id: 3, name: '机甲大师s1', image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605703133913&di=a415583ce97dd0a34efe17cac24a97ab&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200325%2F64ebb68f1125450f91e64bb34dc19d55.jpeg', }, { id: 0, name: 'mavic 2', image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4132295553,3011440949&fm=26&gp=0.jpg', }, ]; const DragAndDropPage: React.FC = () => { const [list, setList] = useState(showList); // IMPORTANT: 动画需要,需要保持一定的渲染顺序 const sortedList = useMemo(() => { return list.slice().sort((a, b) => { return a.id - b.id; }); }, [list]); const listHeight = useMemo(() => { const size = list.length; return Math.ceil(size / COLUMN) * HEIGHT; }, [list]); return ( <div className={styles.wrapper} style={{ width: COLUMN * (WIDTH + IMAGE_PADDING) + IMAGE_PADDING }} > <ul className={styles.list} style={{ height: listHeight }}> {sortedList.map((item) => { const index = list.findIndex((i) => i === item); const row = Math.floor(index / COLUMN); const col = index % COLUMN; return ( <li key={item.id} className={styles.item} style={{ height: HEIGHT, left: col * (WIDTH + IMAGE_PADDING), top: row * HEIGHT, padding: `0 ${IMAGE_PADDING}px` }} data-id={item.id} > <img src={item.image} alt={item.name} width={WIDTH} /> </li> ); })} </ul> </div> ); }; export default React.memo(DragAndDropPage);
- 样式文件的内容如下:
/** index.module.scss */ .wrapper { overflow: hidden; margin: 100px auto; padding: 10px 0; background: #fff; border-radius: 5px; } .list { list-style: none; padding: 0; margin: 0; font-size: 0; position: relative; } .item { position: absolute; display: flex; align-items: center; transition: all 0.2s ease-in-out; }
效果如下:
- 通过上述代码可以看到,尽管展示的
li
元素看起来像是按照list
原始顺序展示,但是实际上其渲染顺序是由排序后的列表sortedList
决定的。
之所以表现像是按照 list
原始顺序展示,是通过在 sortedList.map
时根据当前 item
在 list
数组的索引 index
计算出其CSS的 left
和 top
属性。
拖拽实现
拖动增加特殊样式
- 首先,为最外层的容器
wrapper
绑定ref
属性,方便在之后的事件方法中获取到该DOM
节点,并将每个li
元素的draggable
属性的值设置为true/false
使其变为可拖动元素,同时绑定ondragstart
事件:
handleDragStart
方法主要是将当前被拖动元素的数据保存下来,并给其增加特殊样式(设置元素的透明度和放大元素),相关代码如下:
- 此时效果如下:
拖放结束移除特殊样式
- 可以看到,当开始拖动元素时,元素应用了特殊样式,但是松开鼠标后元素没恢复原来的样式。这时候就需要在拖动结束后删除前面添加的特殊样式。
- 为了减少内存消耗,我们把被拖动元素的
ondragend
事件委托到最外层容器(事件委托),相关代码如下:
- 此时效果如下:
拖动排序
- 接下来将实现最重要的拖动排序功能,主要是为元素绑定
ondragover
事件。 - 默认情况下,数据/元素不能放置到其他元素中。如果要实现该功能,我们需要防止元素的默认处理方法。我们可以通过调用
event.preventDefault()
方法来实现 ondragover 事件。 - 当
ondragover
事件被触发时,需要获取当前鼠标的位置(event.clientX
,event.clientY
),计算出当前鼠标拖动到哪个元素上通过判断当前被拖动元素和其他元素的位置,实现元素的交换排序,关键的是实现updateList
方法,相关代码如下:
/** 将某元素插入到数组中的某位置 */ export function insertBefore<T>(list: T[], from: T, to?: T): T[] { const copy = [...list]; const fromIndex = copy.indexOf(from); if (from === to) { return copy; } copy.splice(fromIndex, 1); const newToIndex = to ? copy.indexOf(to) : -1; if (to && newToIndex >= 0) { copy.splice(newToIndex, 0, from); } else { // 没有 To 或 To 不在序列里,将元素移动到末尾 copy.push(from); } return copy; } /** 判断是否数组相等 */ export function isEqualBy<T>(a: T[], b: T[], key: keyof T) { const aList = a.map((item) => item[key]); const bList = b.map((item) => item[key]); let flag = true; aList.forEach((i, idx) => { if (i !== bList[idx]) { flag = false } }) return flag; } const DragAndDropPage: React.FC = () => { const [list, setList] = useState(showList); const dragItemRef = useRef<ListItem>(); const dropAreaRef = useRef<HTMLDivElement>(null); ... const updateList = useCallback( (clientX: number, clientY: number) => { const dropRect = dropAreaRef.current?.getBoundingClientRect(); if (dropRect) { const offsetX = clientX - dropRect.left; const offsetY = clientY - dropRect.top; const dragItem = dragItemRef.current; // 超出拖动区域 if ( !dragItem || offsetX < 0 || offsetX > dropRect.width || offsetY < 0 || offsetY > dropRect.height ) { return; } const col = Math.floor(offsetX / WIDTH); const row = Math.floor(offsetY / HEIGHT); let currentIndex = row * COLUMN + col; const fromIndex = list.indexOf(dragItem); if (fromIndex < currentIndex) { // 从前往后移动 currentIndex++; } const currentItem = list[currentIndex]; const ordered = insertBefore(list, dragItem, currentItem); if (isEqualBy(ordered, list, 'id')) { return; } setList(ordered); } }, [list] ); const handleDragOver = useCallback( (e: React.DragEvent<HTMLDivElement>) => { e.preventDefault(); updateList(e.clientX, e.clientY); }, [updateList] ); return ( <div className={styles.wrapper} ref={dropAreaRef} style={{ width: COLUMN * (WIDTH + IMAGE_PADDING) + IMAGE_PADDING }} onDragEnd={handleDragEnd} onDragOver={handleDragOver} > <ul className={styles.list} style={{ height: listHeight }}> {sortedList.map((item) => { const index = list.findIndex((i) => i === item); const row = Math.floor(index / COLUMN); const col = index % COLUMN; return ( <li draggable key={item.id} className={styles.item} style={{ height: HEIGHT, left: col * (WIDTH + IMAGE_PADDING), top: row * HEIGHT, padding: `0 ${IMAGE_PADDING}px`, }} data-id={item.id} onDragStart={(e) => handleDragStart(e, item)} > <img src={item.image} alt={item.name} width={WIDTH} /> </li> ); })} </ul> </div> ); }; export default React.memo(DragAndDropPage);
- 效果如下:
完整代码
index.tsx
文件中的内容:
- 样式文件内容:
总结 ?
- 本文介绍了如何在
React
项目中实现简易的图片拖动排序。主要是通过给需要拖动的元素设置draggable
属性,并监听相关的事件,进行样式增减、拖动排序等。
以上内容如有遗漏错误,欢迎留言 ✍️指出,一起进步???
如果觉得本文对你有帮助,??留下你宝贵的 ?