vue2实现卡片拖拽式课程表

目录

一、效果展示

二、代码分析

2.1、表格编写与课程卡片

2.2、初始化数据与渲染

2.3、拖拽卡片到表格，进行插入

2.4、自定义指令进行删除

三、Js实现列表拖拽排序

3.1、效果展示

3.2、代码分析 

一、效果展示

二、代码分析

主页面代码：

卡片组件代码：

2.1、表格编写与课程卡片

  静态页面主要采用两栏布局。左侧为卡片组件，右侧为表格。

2.2、初始化数据与渲染

  td是单元格，现在里面是一个7X7的表格，想要将指定课程的卡片渲染上去，我们可以借助cellData变量里的值，类似二维数组，我们找到坐标，就可以渲染上去。

2.3、拖拽卡片到表格，进行插入

  拖拽效果：draggable="true"  意味着该盒子可被拖动，包括很多事件，比如：dragstart、dragend、dragover、dragenter等。

  插入实现：看似是将左侧的卡片拖进去，实则是在进入表格时（拖拽结束）进行了数据的改动，就是给cellData这个对象里继续增加一个属性和属性值，达到插入效果。vue2里直接复制，视图不会变化，可以通过$set进行视图更新，this.$set(this.cellData, prop, key);

2.4、自定义指令进行删除

  本例中通过视图中  v-CoursePanel="{ cellData, n, timeSlot: i }"，结合directives里的CoursePanel指令进行表格内卡片的删除。这里的删除指删除表格内的任意卡片，而不能删除左侧的原始卡片。所以组件结合自定义指令去进行删除操作。

  现在它删除有个bug，点击x删除，需要再次拖拽（添加）时，才会看到删除的卡片效果，尚待完善。。。

三、Js实现列表拖拽排序

3.1、效果展示

3.2、代码分析 

  页面初始化时，执行render()和bindEvent()函数，前者是渲染出一个带有内容的Li列表，将其追加(x.appendChild())在主体盒子上.

  拖拽插入思想：

在handleDragOver函数里：自身即将到达要插入对象的一半位置(e.clientY <= item.offsetTop + item.offsetHeight / 2)时，就将自身插入(x.insertBefore())到某对象之前.