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. VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题

    VUE基础之:visible.sync-模态框显示隐藏.elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了,最近终于有时间拉出来写完了.... 我们日常开 ...

  2. 浏览器刷新时候不删除信息,关闭后删除用户信息处理办法,浏览器监听刷新以及删除事件、cookie、session、sessionStorage、localStorage区别

    首先我们可以了解到:sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面: localStorage 和 cookie 在所有同源窗口是共享的 那么我们可以根据用户不同需求来进行 ...

  3. angular在服务中调用组件的某个方法,并传参给组件,(反向调用),变量改变后,强制更新视图

    需要被调用方法的组件文件 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; ...

  4. 《《关于我把好好的c++小游戏改的很ex》》

    #undef UNICODE#undef _UNICODE#include <iostream>#include <iomanip>#include <string> ...

  5. IDEA必备插件、阿里巴巴规范插件(代码格式化,注释模板化)的安装及使用和快捷键设置

    背景:记录下idea的配置,换电脑方便直接配置这些信息 第一步:安装必备插件如下 英文直接翻译就是插件的作用,大部分不用额外配置,Adapter for Eclipse Code Formatter是 ...

  6. 【教程搬运】分析并编写suricata规则(内含两个示例)

    suricata规则分析 参考1 参考2 Suricata 签名的结构 在高层次上,Suricata签名由三部分组成: Action:当流量符合规则时采取的行动 Header:一个标题,描述主机.IP ...

  7. 使用 LoRA 进行 Stable Diffusion 的高效参数微调

    LoRA: Low-Rank Adaptation of Large Language Models 是微软研究员引入的一项新技术,主要用于处理大模型微调的问题.目前超过数十亿以上参数的具有强能力的大 ...

  8. 力扣每日一题2023.1.19---2299. 强密码检验器 II

    如果一个密码满足以下所有条件,我们称它是一个 强 密码:    它有至少 8 个字符.    至少包含 一个小写英文 字母.    至少包含 一个大写英文 字母.    至少包含 一个数字 .    ...

  9. day08-SpringMVC底层机制简单实现-04

    SpringMVC底层机制简单实现-04 https://github.com/liyuelian/springmvc-demo.git 8.任务7-完成简单视图解析 功能说明:通过目标方法返回的 S ...

  10. C#通过OLEDB将DataTable写入Excel文件中

    利用OLEDB将DataTable数据写入Excel文件中,如果数据量过多,执行效率很缓慢,大数据量不推荐使用此方法. /// <summary> /// 创建DataTable /// ...