网站初期建设宣传,深圳酒店网站建设,字体怎么装到wordpress,wordpress 去掉主题Drag API React中的Drag API是用于实现拖放功能的API。该API由React DnD库提供#xff0c;可用于实现拖放操作#xff0c;例如将元素从一个位置拖动到另一个位置。
React DnD库提供了两种Drag API#xff1a;基于HTML5的拖放API和自定义实现的拖放API。
基于HTML5的拖放AP…Drag API React中的Drag API是用于实现拖放功能的API。该API由React DnD库提供可用于实现拖放操作例如将元素从一个位置拖动到另一个位置。
React DnD库提供了两种Drag API基于HTML5的拖放API和自定义实现的拖放API。
基于HTML5的拖放API是使用浏览器提供的原生拖放功能该功能可以拖动任何元素并支持将元素拖动到其他应用程序中。自定义实现的拖放API则提供了更多的灵活性和控制但需要更多的编码。
要使用Drag API需要创建一个Drag Source和一个Drop Target。Drag Source是需要拖动的元素Drop Target是可以放置拖动元素的位置。通过将Drag Source和Drop Target包装在Drag and Drop容器中可以启用拖放功能。
认识拖拽
鼠标拖拽是一个常见的交互场景在这个熟悉的过程将会发生哪些事件 拖拽事件指用户通过鼠标或其他指针设备将元素移到一个新的位置上。拖拽过程涉及两个对象被拖拽元素上图中 A 和可释放目标上图中 B 被拖拽元素
默认情况下图片、链接和文本是可拖动的。HTML5 在所有 HTML 元素上规定了一个 draggable 属性 表示元素是否可以拖动。图片和链接的 draggable 属性自动被设置为 true而其他所有元素此属性的默认值为 false。
某个元素被拖动时会依次触发以下事件:
ondragstart拖动开始当鼠标按下并且开始移动鼠标时触发此事件整个周期只触发一次ondrag只要元素仍被拖拽就会持续触发此事件ondragend拖拽结束当鼠标松开后会触发此事件整个周期只触发一次。可释放目标
当把拖拽元素移动到一个有效的放置目标时目标对象会触发以下事件
ondragenter只要一把拖拽元素移动到目标时就会触发此事件ondragover拖拽元素在目标中拖动时会持续触发此事件ondragleave 或 ondrop拖拽元素离开目标时没有在目标上放下会触发ondragleave当拖拽元素在目标放下松开鼠标则触发ondrop事件。目标元素默认是不能够被拖放的即不会触发 ondrop 事件可以通过在目标元素的 ondragover 事件中取消默认事件来解决此问题。 生命周期 拖拽操作中的数据传输
除非数据受影响否则简单的拖放并没有实际意义。为实现拖动操作中的数据传输event 对象上暴露了 dataTransfer 对象用于从被拖动元素向放置目标传递字符串数据。我们使用它来通知画布当前需要渲染的组件是什么。
dataTransfer 对象主要有两个方法getData() 和 setData()分别用来获取和存储值。setData()的第一个参数以及 getData()的唯一参数是一个字符串表示要设置的数据类型text或URL 虽然这两种数据类型是 IE 最初引入的但 HTML5 已经将其扩展为允许任何 MIME 类型。为向后 兼容HTML5 还会继续支持text和URL但它们会分别被映射到text/plain和text/uri-list”
需要注意的是存储在 dataTransfer 对象中的数据只能在放置事件中读取。如果没有在 ondrop 事件中取得这些数据dataTransfer 对象就会被销毁数据也会丢失。 代码实现
我在项目中使用 React 来实现并且考虑到跨组件通信我使用了 dva 来管理数据流。 如何标记当前拖拽的元素
HTML5 支持的 data-x 属性我们可以将当前组件的类型 Rectangle 赋值给它这样处理和画布组件通信方便一些
const Block (props) {const handleDragStart (e: React.DragEventHTMLDivElement) {// 向拖拽数据中添加项目 e.dataTransfer.setData(text, e.target.dataset.index);};return (div onDragStart{handleDragStart}Button draggable data-indexRectangle二维码/Button/div);
};
在上文中讲到dataTransfer 的数据必须在 handleDrop 方法中获取。实际的用来保存画布中的所有组件的数据
function DragEditor(props) {const { dvaStore, dispatch } props;// 阻止浏览器默认事件否则 ondrop 不会触发const handleDragOver (e: React.DragEventHTMLDivElement) {e.preventDefault();};const handleDrop (e: React.DragEventHTMLDivElement) {e.preventDefault();// 获取拖拽元素的组件类型const type e.dataTransfer.getData(text);// COMPONENT_LIST 定义了组件的数据格式根据 type 匹配const component COMPONENT_LIST.filter((i) i.component type,)[0];// 将组件数据添加到 store画布将会根据数据渲染出组件if (component) {dispatch?.({type: store/addComponent,payload: component,});}};return (...);
}
在画布中拖动
拖动主要依赖组件的初始位置鼠标开始位置、结束位置。根据后两组得到鼠标移动的距离和初始位置相加后得到最终位置。
function DragEditor(props: IEditorProps) {const { dvaStore, dispatch } props;const [startAxis, setStartAxis] React.useState({ x: 0, y: 0 }); // 鼠标开始拖动时的位置const handleDragStart (e: React.DragEventHTMLDivElement) {setStartAxis({ x: e.clientX, y: e.clientY });};const handleDragEnd (e: React.DragEventHTMLDivElement, data: IComponentSchema) {// 鼠标移动的距离const displacementX e.clientX - startAxis.x;const displacementY e.clientY - startAxis.y;// 计算组件的终点位置初始位置 鼠标移动的距离const endX Number(data.style.left) displacementX;const endY Number(data.style.top) displacementY;// 限制坐标的最小值为 0const top Math.max(endY, 0);const left Math.max(endX, 0);// 更新当前组件样式dispatch?.({type: store/setShapeStyle,payload: { top, left },});};return ({dvaStore.componentsData.map((i) {return (RenderComponenttype{i.component}componentData{i}key{i.generateId}onDragStart{handleDragStart}onDragEnd{(e) handleDragEnd(e, i)}/);})});
}
数据结构
最后就是组件和数据结构的设计RenderComponent 是一个自定义的组件会根据传入的 type 属性渲染对应的组件。组件的数据结构设计如下
export const COMPONENT_LIST [{component: Rectangle, // 组件名称label: 矩形, // 左侧 Blocks 组件列表中显示的名字propValue: , // 组件所使用的值icon: BorderOuterOutlined, // 左侧组件列表中显示的 icon 图标animations: [], // 动画列表events: {}, // 事件列表style: { // 组件样式width: 100,height: 100,top: 0,left: 0,},},{component: Text,label: 文字,propValue: 文字,icon: ,animations: [],events: {},style: {width: 200,height: 33,fontSize: 14,fontWeight: 500,lineHeight: ,letterSpacing: 0,textAlign: ,color: ,},},
];
总结
拖拽是非常有趣的一种交互特别是在低代码场景下非常重要。使用原生 API 能够让我们更加了解底层的一些细节React 社区也有一些优秀的第三方框架如react-dragable, react-beautiful-dnd大家有兴趣不妨再多了解下。
