react如何拖拽模態框

實際開發中,模態框展現資料會經常出現.但不幸的是有時功能開發完了,ui同學突然提出需求希望模態框能拖拽.本文使用的模態框由 ant design 3.0 的 modal 元件封裝而成,如何在不修改原來**的基礎上實現拖拽呢.最終效果圖如下:

新建檔案modaldrag/index.js,將下面**copy進去

dragobj是具體拖拽的原生js**,後面再看

拖拽乙個元素通常需要傳入兩個引數.乙個是推拽後能移動的區域,對應著上圖中的整個匯出**控制項,控制項的類名為main_class.另外乙個是監聽拖拽的區域,對應著上圖中的頭部,只有當滑鼠在頭部按下時再移動才能拖動**.頭部的類名為title_class.兩個引數都從外部傳入.如果兩個引數都不傳,預設直接監聽child_node並拖拽child_node

import react from 'react';
import reactdom from 'react-dom';
import dragobj from './drag';
//main_class和title_class都是類名
export const draghoc = (innercomponent,main_class,title_class) =>
class extends react.component 
init = () => `):child_node, //只拖拽類名為 $ 的div
title_class?child_node.queryselector(`.$`):child_node //當滑鼠按在類名為 $ 的div上時才允許拖拽);}
}, 0);
};componentwillunmount() 
}render() 
};

如果在實踐中發現拖拽無效,請務必將上面**中的child_node列印出來,觀察是否獲取到了真實的dom以及它內部是否渲染完整.如果沒有渲染完全,說明innercomponent包含非同步渲染的**,要等到渲染完畢後再進行拖拽事件繫結新建檔案modaldrag/drag.js,將下面**copy進去

下面是實現拖拽的原生**.主要負責對dom元素進行事件繫結以及改變位置等

export default class dragobj 
init() 
destory() 
bindevent() 
movestart(e) 
moving(e) 
this.start_x1 = e.pagex;
this.start_y1 = e.pagey;
this.render();
}  moveend(e) 
this.state = false;
this.delta_x = this.start_x1 - this.start_x0 + this.delta_x;
this.delta_y = this.start_y1 - this.start_y0 + this.delta_y;
}  render() px,$px)`;
}}

引入高階函式draghoc,引入需要增強的模態框元件toastexport

由於筆者在專案中使用 ant design 3.0 中的 modal 元件做模態框,讓其拖拽只需要傳遞類名「ant-modal-content」和「ant-modal-header」.

其他場景需要根據靜態模態框元件的dom結構分析哪一部分是要移動的,哪一部分是監聽拖拽的,將這兩部分的類名作為引數傳入

import  from "./index.js";
import toastexport from "../components/toastexport/index.js";//引入靜態的模態框元件(使用者自已定義的模態框元件)
const toastexportv2 = draghoc(toastexport,"ant-modal-content","ant-modal-header"); //生成了具備拖拽功能的模態框元件

呼叫draghoc函式生成toastexportv2後,接下來就可以頁面上直接使用.如果業務上需要傳遞引數直接加在屬性上

const  = this.props;  //visible控制顯示隱藏模態框

呼叫時需要注意,當visible為true時再渲染toastexportv2,為了防止繫結事件時dom還沒開始渲染.visible為false時,元件銷毀會自動呼叫destory方法解綁已註冊的事件

react如何拖拽模態框

高階拖拽（帶框拖拽）

模態物件框

react 拖拽連線外掛程式 react拖拽功能實現

react如何拖拽模態框

高階拖拽（帶框拖拽）

模態物件框

react 拖拽連線外掛程式 react拖拽功能實現

相關推薦