element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题

实现效果：

实现代码：

//最外边的这个是放表格容器的div
<div @mousemove="shrinkMove" @mouseup="shrinkUp">
//划重点：id = "resizetable"--用这个id标识修改哪个容器的宽度<div id = "resizetable">左边表格的div</div><div @mousedown="shrinkDown">图上拖动条的div</div>
</div>
//只写了重要代码
data() {return {isShrink: false, // 控制是否改变宽度}
}
methods: {shrinkMove(e) {document.onselectstart = function() { return false } // 解决拖动会选中文字的问题if (this.isShrink) {//e.screenX，鼠标的x坐标，设置最小最大宽度以及误差值根据项目需要决定const wid = e.screenX - 25 // 误差值//划重点：id = "resizetable"--用这个id标识修改哪个容器的宽度var resizetable = document.getElementById('resizetable')if (wid < 520) {resizetable.style.width = 520 + 'px' //最小值} else if (this.miningAreaMap.size === 0 && wid > 690) {resizetable.style.width = 690 + 'px' //正常时最大值} else if (this.miningAreaMap.size > 0 && wid > 820) {resizetable.style.width = 820 + 'px' //数据多一列时可拖动的最大值} else {resizetable.style.width = wid + 'px'  //拖动时的宽度}}},shrinkDown(e) {document.onselectstart = function() { return false } // 解决拖动会选中文字的问题this.isShrink = true},shrinkUp(e) {document.onselectstart = function() { return false } // 解决拖动会选中文字的问题this.isShrink = false},
}

element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题相关推荐

element-ui el-dialog侧边弹窗可横向拖拽改变宽度
el-dialog侧边弹窗可横向拖拽改变宽度,并且存储到localStorage,刷新页面后依然是拖拽后的宽度 Vue.directive('dialogDrag', {inserted: funct ...
实现div边框可拖拽改变宽度
项目要求实现目录和文章内容之间可以拖拽自由改变宽度,百度了很多,然后自己改了一下,效果如下. html代码这里只列出来最外层的框架,里面具体填什么看你自己咯 <div class=" ...
使用react-draggable和react-resizable实现Ant Design Modal的拖动和拖拽改变宽度
文章目录使用react-draggable和react-resizable实现Ant Design Modal的拖动和拖拽改变宽度需求实现参考代码参考使用react-draggable和r ...
React + re-resizable实现拖拽改变宽度
目录一.效果展示二.实现方法三.使用方法一.效果展示二.实现方法此效果的实现使用了第三方组件re-resizable,通过此React组件可以很便捷的实现可拖拽改变组件大小的需求. 三.使 ...
div边框拖拽改变宽度
css盒子如下图: 注意: 刚开始测试效果不是很好,原因行内块元素之间有缝隙消除行内块元素左右之间的间隙:给父元素设置为弹性布局flex <!DOCTYPE html> <html ...
React 拖拽改变大小，react-resizable 属性详解
源于布局需求,要求Antd的Layout组件中,侧边栏Sider可以拖拽改变宽度-- 开源插件,基于react-draggable插件(同一作者),详见<react-resizable>: ...
原生javascript实现拖拽改变table表格行高（html）
最近在做一个OA的项目,里面需要大量的表格操作.有一些是使用html中的table去模拟excel的功能,等项目做完,我会把这些好玩的功能抽取出来,做一个html的excel插件. 今天先和大家分 ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版类似 Tinder 和探探的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...

element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题

element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题相关推荐

最新文章

热门文章

element vue 点击一边拖拽改变宽度 解决拖动会选中文字的问题

element vue 点击一边拖拽改变宽度 解决拖动会选中文字的问题相关推荐

最新文章

热门文章

element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题

element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题相关推荐