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. DVWA靶场实战(十一)——XSS(Reflected)

    DVWA靶场实战(十一) 十一.XSS(Reflected): 1.漏洞原理: XSS被称为跨站脚本攻击(Cross Site Script),而Reflected被称作反射型XSS.不同于DOM和S ...

  2. 流思想概述-两种获取Stream流的方式

    流思想概述 注意:请暂时忘记对传统IO流的固有印象 ! 整体来看,流式思想类似与工厂车间的 '生产流水线'. 当需要对多个元素进行操作(特别是多步操作)的时候,考虑到性能及便利性,我们应该首先拼好一个 ...

  3. Java入门与进阶P-5.1+P-5.2

    初识数组 一.数组 数组是用来存储一个元素个数固定且元素类型相同·的有序集. 数组的两个特点:大小是固定的,且确定之后是不能改变的:数组内的元素类型是相同的. 1.数组的定义(两种): int arr ...

  4. (Newtonsoft)Json增删改查

    public static class JsonHelper { #region 字段 private static string json; public static string path; # ...

  5. 高精度计算模板 -感谢acwing

    高精度加 1 // C = A + B, A >= 0, B >= 0 2 vector<int> add(vector<int> &A, vector&l ...

  6. JAVA虚拟机08--垃圾回收--HotSpot的算法实现细节

    1 stop the world 2 减少stop the world的时间-OopMap 3 OopMap数据结构的维护-安全点-安全区域 3.1安全点 3.2在垃圾回收时如何让所有线程到达最近的安 ...

  7. JZOJ 5350. 【NOIP2017提高A组模拟9.7】陶陶摘苹果

    题目 分析 很神奇的事情又发生了!! 很容易想到设 \(f_{i,j}\) 表示考虑前 \(i\) 个区间,已选 \(j\) 个区间且必选第 \(i\) 时能覆盖到的最多苹果数 转移 \(O(n)\) ...

  8. addeventlistener可以这样表示

    事件绑定方法1: //找到id为category的div,绑定onmouseover事件 $("#category")[0].addEventListener("mous ...

  9. 怎么下载blob视频 .mu38视频下载转换格式

    首先获取视频m3u8地址 浏览器按 F12进入开发者模式 选择 Network 搜索.m3u8 RequestURL 获取视频url m3u8文件介绍 M3U(Moving Picture Exper ...

  10. python将一行多字符转换为多行单字符方法

    笔者这次是第一次写东西,主要是想把在运用中的一些实例给记录下来,分享给那些和笔者有同样需求的人.可能分享的方法有些累赘或者不准确,还望各位大佬勿喷,因为笔者也是python小白,这些都是通过搜索汇总得 ...