Vue.directive('dragsroll', {
bind (my_el) {
let elHeader = my_el.querySelector('div.ivu-table-header');
let el = my_el.querySelector('div.ivu-table-body');
elHeader.style.cursor = 'grab';
elHeader.onmousedown = function () {
let gapX = event.clientX;
let startX = elHeader.scrollLeft;
document.onmousemove = function (e) {
let x = e.clientX - gapX;
el.scrollLeft = startX - x;
return false;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
})

 注册全局自定义指令,然后再i-table中调用即可

解决iview拖动头部横向滚动问题的更多相关文章

  1. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  2. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  3. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  4. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

  5. 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView

    李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222

  6. 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView

    李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果:  01 - 创建四个控制器 02 - 定义需要 ...

  7. 李洪强实现横向滚动的View<二>

    上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下:  01 - 创建CFTyreScr ...

  8. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  9. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  10. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

随机推荐

  1. MySQL 表的创建、复制、修改与删除

    MySQL中如何利用代码完成表的创建.复制.修改和删除. 一.创建表 --创建新表,如果存在则覆盖 drop table [if exists] 表名; --创建新表,如果存在则返回 create t ...

  2. webpack打包后发现有一部分代码还携带注释,如何解决?/webpack打包删除注释以及console.log--快快点进来看一看吧~~

    1.自己配置了一个webpack,打包后发现里边部分代码还存在注释,顿感不妙 废话不多说 解决如下: npm install terser-webpack-plugin --save-dev 然后在w ...

  3. Keepalived高可用集群部署

    KeepAlived 目录 KeepAlived KeepAlived安装 KeepAlived部署 准备工作 主备模式 节点配置 验证 正常状态 故障 故障恢复 1+N(一主多备)模式 节点配置 验 ...

  4. 字符输入流读取字符数据-writer类

    字符输入流读取字符数据 读取字符:read方法,每次可以读取一个字符的数据,提升为int类型,读取到文件末尾,返回-1,循环读取,代码使用演示∶ writer类 java.io.Filelwriter ...

  5. Gitee + Sourcetree 配置公钥 SSH

    设置前提 安装Git Git下载 安装sourceTree sourceTree下载 gitee账号 gitee官网 Git设置公钥 1.在安装好 sourcetree 后 点击操作选择在终端中打开 ...

  6. .NET Core MongoDB的简单使用

    一.创建测试库.测试表.添加测试数据 使用之前文章提到的MongoDB Compass用法分别添加数据库[myDb]和集合(表)[userinfos]信息, 参考链接为:MongoDB Compass ...

  7. bat脚本登陆ftp服务器

    用bat脚本登录ftp服务器,下载指定文件. 第一次脚本,有问题,你发现了么? 由于每个">>"重定向符号之前都习惯用空格(python style),导致写道ftp. ...

  8. JumpServer(v2.28.6) 堡垒机常见问题

    JumpServer 各组件查询日志方法 # 默认持久化目录 /data/jumpserver ls -al /data/jumpserver/core/logs ls -al /data/jumps ...

  9. Word 设置脚注和尾注

    描述 脚注一般位于页面的底部,作为文档某处内容的注释.尾注一般位于文档的末尾,列出引文的出处等. 设置脚注和尾注 将光标移动到要插入脚注或尾注的地方,然后点击"引用"选项卡. 左边 ...

  10. 基于Python的OpenGL 04 之变换

    1. 概述 本文基于Python语言,描述OpenGL的变换 前置知识可参考: 基于Python的OpenGL 03 之纹理 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者这里 ...