H5ke14--2--建立表格可移动行-含源代码

首先要每一行设置可拖动,每一行获取他的id放到dataTransfer,阻止目的内移动的默认禁止事件,放下我就拿到dataTransfer数据,通过id得到他的对象,获取目标的对象的tr(父),两个对象的tr转换

draggable="true",dragover设置,preventDefault阻止我dragover(目的内移动)就可以,dataTransfer.getData,得到getElementById,e.target.parentNode;,insertBefore(oldTr, newTr);

标注:我们有两个事件有两个datatranfer(只是作为一个容器),第一个放到名字为"text"的键值对,取也是通过"text"来取

点击与释放,点击捕获的是一行,释放移到的是一个td,所以要获取td的父元素tr,所以 点击的td还要转化为tr才能进行转化,oldTr.parentNode

实践,要冒泡的(子元素触发了同时触发父元素),一个表格要知道选定的id以及,目标地点的idparentNodedrop用到inserbefore()节点就是行放到transfer



    
        
        Title
        
    
    
        
序号 姓名 性别 年龄 班级
1 张三 20 1
2 李四 21 2
3 王五 22 3
4 赵六 23 4
5 田七 24 5

你可能感兴趣的:(H5,前端,javascript,html)