移动端实现元素拖拽效果插件

1、移动端实现元素拖拽效果插件如何解决自适应表格内容过多将布局支撑乱了的状况给 table 标签加上如下 css 声明，table-layout 作用就是让表格布局固定，使得表格的宽度不会按照内容多少而动态变幻td 不用设置 height单元格内容太多，会浮现内容折行限制，将 td 撑篙，全部设置 height 没故意义如何设置初始高度设置 td 初始高度最好用 padding 举行设置，考虑到了单元格被撑开的状况表格边框问题给 th td 都设置 border 后会浮现如下情形如何让表格的边框重叠border-collapse 可以让单元格的之间分享边框border-spacing 消退单元格之

2、间的间距如何用法伪元素实现表格流式布局伪元素 :before 和 :after 它们有一个功能是将元素属性值显示到html内容里，content: attr（data-label），放在before/after伪元素类里。我们就能够让table在pc端表现成网格效果，而在小屏的手机端表现成流式布局我们以600px为小屏幕大屏幕的分界点，下面的css用法媒体查询语句，在小于600px宽的屏幕上，用css将td上的属性值取出来，放到内容区显示拖拽问题第一种解决计划 原生 table + 原生拖拽其次种解决计划 原生 table + sortablejs第一种解决的问题假如只用法 element-u

3、i 的 el-table 貌似表格一行的数据无法拿到所以只能用法原生table 布局，结合原生 拖拽就可以拿到一行的数据了原生拖拽总结 html5 drag dropdragstart 开头拖拽，参数 event 大事对象 指向拖拽的项drag 拖拽过程中，参数 event 大事对象指向拖拽的项dragend 拖拽结束，参数 event 大事对象指向拖拽的项dragenter 当拖拽源进入拖拽放置的位置时触发dragleave 当拖拽源离开拖拽放置的位置时触发dragover 当拖拽源在拖拽放置位置移动时触发drop 当拖拽源在拖拽位置放置时触发e.datatransfer对象1. set（k

4、ey, value） 通常结合 dragstart 办法一起用法，把需要用法到数据放置到 e.datatransfer 对象中2. get（key） 通常结合 drop 办法一起用法，把需要用到的数据从 e.datatransfer 对象中取出来第一种需求，包含 checkbox 的表格拖拽问题1 这个地方涉及到 thead, tbody 分开布局问题，tbody中的 checkbox 与右侧数据也是分开布局问题，这里可以解决全选问题，假如挺直与右侧数据一起循环渲染出来的话，会导致全选问题很难处理，这里的解决计划是用法 el-checkbox-group, el-checkbox 来实现全选，

5、保证可以猎取到数据checkbox 选中高亮问题，当我点击每一行的checkbox 时，会给每一行加上高亮，当我点击表头的checkbox 时，所有选中，tbody 中的数据所有高亮数据行拖拽高亮问题，这里我一开头是用法 html5 中 classlist.add（） 和 classlist.remove（） 类名，但是发觉当给 el-checkbox 的添加背景色类名时，没有效果，发觉是渲染出来的 label 标签的类名惟独 .el-checkbox 猎取 .el-checkbox.is-checked ，其他自动会被删除掉了，所以有一种统一的方式就是给 table-data 数据初始化的时

6、候加上一个 标记 issetbgcolor 属性来标记是否给数据加上背景色其次种需求，两个表格只从一边拖到另一边因为假如用法 element-ui 结合 sortablejs 的话，拖拽只能拿到 dom，拿不到数据，所以只能用法原生 table 让后将每一行的数据用法 data-属性躲藏起来，然后拖拽到左边的话，可以拿到当前拖拽项的 dom 元素 再从 dom 元素中 dataset 对象取出数据同时给拖拽过来的那项设置不能拖拽 filter 属性禁止在此拖拽，然后左边删除时候解除禁止拖拽第三种需求 两个表格相互拖拽跟上面的需求，操作步骤类似组件中需要用法到的 utils.js 类似像 el-check