原生JS实现右键菜单和拖拽调整布局大小

new Contextmenu(?nodeConfigs) // config 在创建实例时可以不传入，通过addMenu(nodeConfigs)方法设置也可以 配置：

nodeConfigs = { x:{ titile:" 一级菜单 1", target: callback, xx:{ titile:" 二级菜单", target: callback, } } }

一个花括号为一个层级，如果不定义title，默认以键值作为名称。 target 点击后执行的任务，它是一个回调函数，callback(targetEl,el )。

bind(domId) // 绑定dom元素 unbind(domId) // 解除绑定 addMenu(nodeConfigs,?position="bottom") // 添加菜单 position 可选 "top" | "bottom" 默认从底部追加"bottom" dispose() // 销毁 属性:

isbind_containers //查看已绑定的dom frameContainer.js 实现拖拽调整布局大小 创建实例：

new FrameContainer(?row_classname, ?col_classname, ?content_classname) 样式名称： // row_classname 可选 | 默认 "r-row" // col_classname 可选 | 默认 "r-col" // content_classname 可选 | 默认 "r-content" 结构

行模式 <div id="root"> <div class="r-row"> <div class="r-content"> </div> </div> </div> 列模式 <div id="root"> <div class="r-col"> <div class="r-content"> </div> </div> </div> 配置

defaultOptions = { isDraggable: true, // 是否开启拖拽 minSize: 10, // 拖动最小间隙 isPercent: true, // 宽高为百分比 ctrlElsize: 20, // 控制器大小 lineColor: "#000", // 分割线颜色 lineSize: 1, // 分割线大小 creatLine: true, // 是否创建分割线 draggableClassName: "draggable", // 拖拽样式名称 rootDomBorder: "1px solid #000", // 根节点边框 rowClassname: "r-row", // 行样式名称 columnClassname: "r-col", // 列样式名称 contentClassname: "r-content", // 单元格样式名称 }; 方法

init(root_domId,?options) // 初始化 getOptions() // 获取配置信息

getParentContentEl(dom,mode) // dom 被向上搜索的dom元素 // mode 默认值 "row" // 获取dom元素父级的contentEl容器,无可用容器时自动创建mode模式的contentEl； // 返回值：contentEl

addRow(dom, ?insertPosition, ?putNode) // 添加行 addColumn(dom,?insertPosition,?putNode) // 添加列 参数: - dom - insertPosition // 插入的位置 默认值 "bottom" ["top"(置顶) | "botoom"（置底） | "before"（dom元素的前面） | "after" （dom元素的后面）] - putNode 额外需要载入的节点 返回值: [newContentEl, thisContentEl]

insertWindowTop(dom) // 在dom元素的上方插入窗口 insertWindowBottom(dom) // 在dom元素的下方插入窗口 insertWindowLeft(dom) insertWindowRight(dom) 事件Event 拖动: onDraging((e)=>{})

onDraging((e)=>{}) 回调参数：e: { type: "draging", aEl: { dom: aEl, width: aEl.offsetWidth, height: aEl.offsetHeight, }, bEl: { dom: bEl, width: bEl.offsetWidth, height: bEl.offsetHeight, }, } 添加窗口: onAddWindow = function(e){}

onAddWindow = function(e){} 回调参数：e: { type: "addWindow", aEl: { dom: aEl, width: aEl.offsetWidth, height: aEl.offsetHeight, }, bEl: { dom: bEl, width: bEl.offsetWidth, height: bEl.offsetHeight, }, } 删除窗口之前 ondeleteWindowBefore= function(e){}

回调参数：e: { type: "deleteWindowBefore", dom: deleteContentEl, } 删除窗口: ondeleteWindow = function(e){}

onAddWindow = function(e){} 回调参数：e: { type: "deleteWindow", dom: near_contentEl, width: near_contentEl.offsetWidth, height: near_contentEl.offsetHeight, } 添加行: onAddRow = function(e){}

onAddRow = function(e){} 回调参数： e: { type: "addRow", dom: newContentEl } 添加列: onAddColumn = function(e){}

onAddColumn = function(e){} 回调参数： e: { type: "addColumn", dom: newContentEl }