dede重工蓝色企业免费网站模板,网站建设实训心得3000字,上海app设计公司,抖音代运营服务方案一. 主要思路
1.1通过绑定自定义的指令#xff0c;获取需要拖动的父子元素#xff0c;
1.2.添加鼠标按下事件onmousedown#xff0c;计算出鼠标的相对位置odiv.offsetLeft与odiv.offsetTop#xff0c;
1.3.鼠标移动事件onmousemove当鼠标移动时触发#xff0c;移动的时…一. 主要思路
1.1通过绑定自定义的指令获取需要拖动的父子元素
1.2.添加鼠标按下事件onmousedown计算出鼠标的相对位置odiv.offsetLeft与odiv.offsetTop
1.3.鼠标移动事件onmousemove当鼠标移动时触发移动的时候相对位置加上偏移距离得到对应的坐标点
1.4.odiv.style.left与 odiv.style.top动态给对应的元素添加位置样式
1.5.onmouseup():鼠标抬起事件。当鼠标抬起触发// 移除对鼠标移动事件的监听 document.onmousemove null document.onmouseup null
1.6.切换页面初始化加载坐标位置保持页面垂直居中对齐// 初始化初始坐标
二. 分布实施
2.1 template结构cursor:move-鼠标移动上变成可拖拽的样式绑定唯一ID 获取初始化坐标原点
templatedivdiv classAllTree!-- cursor:move-鼠标移动上变成可拖拽的样式 --!-- 通过绑定唯一ID 获取初始化坐标原点 --vue2-org-treestyle#fafafa;cursor:movev-dragiddragFather:datatreeData//div/div
/template
2.2 数据结构
data() {return {// 数据treeData: {id: 0,name: ,children: []},};},
2.3 activated()切换页面初始化加载坐标位置保持页面垂直居中对齐获取id
// 切换页面初始化加载坐标位置保持页面垂直居中对齐activated() {// 初始化初始坐标const dialogHeaderEl document.querySelector(#dragFather)dialogHeaderEl.style.left0 px;dialogHeaderEl.style.top0 px;},
2.4 自定义拖拽指令
// 开启拖拽的指令directives: {drag: {// 指令的定义bind: function (el) {var odiv el // 获取当前元素let isMouseDownfalse;//鼠标按下标记// onmousedown()鼠标按下事件。当鼠标按下时触发。odiv.onmousedown (e) {if(e.button0!isMouseDown){// 算出鼠标相对元素的位置let offsetLeft odiv.offsetLeftlet offsetTop odiv.offsetTopvar disX e.clientXvar disY e.clientY// onmosemove()鼠标移动事件。当鼠标移动时触发document.onmousemove (e) {// 用鼠标的位置减去鼠标相对元素的位置得到元素的位置// 结构沿X轴发生翻转X轴坐标变成从左到右计算的时候相反计算var left disX - e.clientX var top e.clientY - disY// 移动当前元素odiv.style.left (left offsetLeft) pxodiv.style.top (top offsetTop) px}isMouseDowntrue}// onmouseup():鼠标抬起事件。当鼠标抬起触发// e.button0代表点击左键document.onmouseup (e) {if(e.button0){isMouseDownfalse;// 移除对鼠标移动事件的监听document.onmousemove nulldocument.onmouseup null}}}}}},
2.5 style样式
style scoped
::-webkit-scrollbar {/*隐藏滚轮*/display: none !important;}
/style
style langless
// 整体的结构设置
.AllTree {font-size: 12px;transform: rotateY(180deg);overflow: auto; // 修改组件内置的样式.org-tree-node-label .org-tree-node-label-inner {cursor: pointer;padding: 0;}// 子节点.org-tree-container {position: relative; /*定位*/display: flex;justify-content: center;align-items: center;min-height: 600px;}
}// 节点样式
.ReNode {height: 40px;min-width: 50px;transform: rotateY(180deg);background-color: rgb(238, 244, 246);display: flex;line-height: 40px;padding: 0 10px;
}/style
三. 特别注意
由于此图结构是从右到左展示市面上的树形结构一般是由从左到右从上到下要求的结构是从右到左所以在进行编写的时候利用 transform: rotateY(180deg);进行了翻转x轴发生了变化所以此处对于坐标的计算有所不同
四.代码汇总
templatedivdiv classAllTree!-- cursor:move-鼠标移动上变成可拖拽的样式 --!-- 通过绑定唯一ID 获取初始化坐标原点 --vue2-org-treestyle#fafafa;cursor:movev-dragiddragFather:datatreeData//div/div
/templatescript
export default {data() {return {// 数据treeData: {id: 0,name: ,children: []},};},// 切换页面初始化加载坐标位置保持页面垂直居中对齐activated() {// 初始化初始坐标const dialogHeaderEl document.querySelector(#dragFather)dialogHeaderEl.style.left0 px;dialogHeaderEl.style.top0 px;},// 开启拖拽的指令directives: {drag: {// 指令的定义bind: function (el) {var odiv el // 获取当前元素let isMouseDownfalse;//鼠标按下标记// onmousedown()鼠标按下事件。当鼠标按下时触发。odiv.onmousedown (e) {if(e.button0!isMouseDown){// 算出鼠标相对元素的位置let offsetLeft odiv.offsetLeftlet offsetTop odiv.offsetTopvar disX e.clientXvar disY e.clientY// onmosemove()鼠标移动事件。当鼠标移动时触发document.onmousemove (e) {// 用鼠标的位置减去鼠标相对元素的位置得到元素的位置// 结构沿X轴发生翻转X轴坐标变成从左到右计算的时候相反计算var left disX - e.clientX var top e.clientY - disY// 移动当前元素odiv.style.left (left offsetLeft) pxodiv.style.top (top offsetTop) px}isMouseDowntrue}// onmouseup():鼠标抬起事件。当鼠标抬起触发// e.button0代表点击左键document.onmouseup (e) {if(e.button0){isMouseDownfalse;// 移除对鼠标移动事件的监听document.onmousemove nulldocument.onmouseup null}}}}}},
};
/scriptstyle scoped
::-webkit-scrollbar {/*隐藏滚轮*/display: none !important;}
/style
style langless
// 整体的结构设置
.AllTree {font-size: 12px;transform: rotateY(180deg);overflow: auto; // 修改组件内置的样式.org-tree-node-label .org-tree-node-label-inner {cursor: pointer;padding: 0;}// 子节点.org-tree-container {position: relative; /*定位*/display: flex;justify-content: center;align-items: center;min-height: 600px;}
}// 节点样式
.ReNode {height: 40px;min-width: 50px;transform: rotateY(180deg);background-color: rgb(238, 244, 246);display: flex;line-height: 40px;padding: 0 10px;
}/style
