今天老师给我们布置一个动态拖拽效果，并且实现数据交互的功能纯js写出来的(全程用的是本地存储因为用绘画存储的话刷新浏览器会根据数据默认排序)，效果如下:
拖拽实现数据交换
这里面用到了html5新增的属性:draggable:true; 默认为false 当为true时，会有一个默认事件(禁用)
html5新增draggable:true默认事件
这时候需要阻止draggable事件的默认事件代码如下：
document.body.addEventListener('dragover', function (e) {
e.preventDefault();
});
ondragstart事件//开始拖拽一个元素或者选中一个元素时触发(鼠标只是点了一下是不会触发的，鼠标点一下不松开然后在滑动鼠标就是触发该事件)
ondrop//当元素或选中的元素释放到一个目标上释放时触发(只有触发了ondragstart事件之后鼠标在一个可被选中的元素上松手就会触发该事件)
更多的关于draggable事件如下：
话不多说上代码！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./js/jquery-3.6.1.js"></script> <style> div div{ border: 1px solid #b9b9b9; margin-top: 10px; background-color: aqua; } </style> </head> <body> <!-- 渲染容器 --> <div style="transition: all 1s;"></div> <button>重置</button> <script> //重新排序 $('button').click(function(){ // 初始值 let data = [ { 'name1':'你好嘿1', 'name2':'你好嘿1', 'name3':'你好嘿1' }, { 'name1':'你好呀2', 'name2':'你好呀2', 'name3':'你好呀2' }, { 'name1':'你好啊3', 'name2':'你好啊3', 'name3':'你好啊3' }, { 'name1':'你好哈4', 'name2':'你好哈4', 'name3':'你好哈4' } ]; // 存入初始值 localStorage.setItem('data', JSON.stringify(data)) box() }) //存入拖动的下标的值的容器 let data2 = []; //存入松手的下标的值的容器 let data3 = []; //存入改变后的值的容器 let data4 = []; function box() { let data1 = JSON.parse(localStorage.getItem('data')); let str = ''; for (let i in data1) { //ondragstart开始拖拽一个元素或者选中一个元素时触发 //ondrop当元素或选中的元素释放到一个目标上释放时触发 str +=`<div draggable="true" ondragstart='anxia(${i})' ondrop='songkai(${i})'> <span>${data1[i].name1}</span> <span>${data1[i].name2}</span> <span>${data1[i].name3}</span> </div>` } $('div').html(str); } box() //阻止draggable事件的默认事件 document.body.addEventListener('dragover', function (e) { e.preventDefault(); }); //按下时的事件 function anxia(i) { console.log(i); //获取本地存储的数据 let data1 = JSON.parse(localStorage.getItem('data')); //每点击一下清空数组 data4 = []; data2 = []; //创造一个数组进行操作 data4 = data1; //点击存入的值 data2.push(data4[i]); //松手存入的值 sessionStorage.setItem('index',i); } //松开时的事件 function songkai(i){ console.log(i); //获取本地存储的数据 let data1 = JSON.parse(localStorage.getItem('data')); let s = sessionStorage.getItem('index'); //每点击一下清空数组 data4 = []; data4 = data1; data3 = []; data3.push(data4[i]); //点击的值等于松手的值 data4[s] = data3[0]; //松手的值等于点击的值 data4[i] = data2[0]; //存入发生改变的数组 localStorage.setItem('data', JSON.stringify(data4)); //重新渲染 box() } </script> </body> </html>
