本文实例为大家分享了Vue实现拖拽式分割布局的具体代码,供大家参考,具体内容如下
特地写了一个demo代码,可以直接复制下来运行
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ? ? <title>Document</title> </head> <body> <div id="app"> ? <div class='container' id='container'> ? ? <div id='top' class='top'>top</div> ? ? <div id='bar' class='bar'></div> ? ? <div id='bottom' class='bottom'>bottom</div> ? </div> </div> <script> var app = new Vue({ ? ? el: '#app', ? ? data: { ? ? }, ? ? mounted(){ ? ? ? this.dragChangeHeight('bar','top') ? ? }, ? ? methods:{ ? ? ? dragChangeHeight(drag, panel) { ? ? ? ? var dragEl = document.getElementById(drag) ? ? ? ? var panelEl = document.getElementById(panel) ? ? ? ? dragEl.onmousedown = function(ev) { ? ? ? ? ? var disH = panelEl.offsetHeight ? ? ? ? ? var disY = ev.clientY ? ? ? ? ? var disT = panelEl.offsetTop ? ? ? ? ? var b = '' ? ? ? ? ?? ? ? ? ? ? document.onmousemove = function(ev) { ? ? ? ? ? ? panelEl.style.height = disH + (ev.clientY - disY) + 'px' ? ? ? ? ? ? // panelEl.style.top = disL - (ev.clientY - disY) + 'px' ? ? ? ? ? } ? ? ? ? ? document.onmouseup = function() { ? ? ? ? ? ? document.onmousemove = document.onmouseup = null ? ? ? ? ? } ? ? ? ? ? return false ? ? ? ? } ? ? ? }, ? ? ? dragChangeWidth(drag, panel) { ? ? ? ? var dragEl = document.getElementById(drag) ? ? ? ? var panelEl = document.getElementById(panel) ? ? ? ? dragEl.onmousedown = function(ev) { ? ? ? ? ? var disW = panelEl.offsetWidth ? ? ? ? ? var disX = ev.clientX ? ? ? ? ? var disL = panelEl.offsetLeft ? ? ? ? ? var b = '' ? ? ? ? ? document.onmousemove = function(ev) { ? ? ? ? ? ? ? panelEl.style.width = disW + (ev.clientX - disX) + 'px' ? ? ? ? ? ? ? // panelEl.style.left = disL - (ev.clientX - disX) + 'px' ? ? ? ? ? } ? ? ? ? ? document.onmouseup = function() { ? ? ? ? ? ? document.onmousemove = document.onmouseup = null ? ? ? ? ? } ? ? ? ? ? return false ? ? ? ? } ? ? ? }, ? ? } }) </script> <style> ? body{ ? ? margin: 0; ? } ? .container{ ? ? /* padding: 20px; */ ? ?? ? ? height: 90vh; ? ? width: 90vw; ? ? display: flex; ? ? flex-direction: column; ? } ? .top{ ? ? width: 100%; ? ? height: 300px; ? ? background-color: blue; ? } ? .bar{ ? ? width: 100%; ? ? height: 10px; ? ? cursor: n-resize; ? ? background-color: black; ? } ? .bottom{ ? ? width: 100%; ? ? flex: auto; ? ? background-color: red; ? } </style> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持源码搜藏网。
【JQ】无限滚动条-jquery.infinitescroll.j
query多选下拉框插件 jquery-multiselect(
手机站jQuery自动完成插件autoComplete.js
热门源码