jquery实现table表格的拖拽排序
1 function addEvent(el,list){ // 参数说明：（table对象，数据列表） 2 $(el).find('tbody>tr').each(function(i, ele){ 3 4 $(ele).off("dragstart dragover dragleave drop"); 5 6 $(ele).on('dragstart', function(event){ 7 let evt = event.originalEvent; 8 evt.dataTransfer.setData('Text', i); 9 evt.dataTransfer.effectAllowed = 'move'; 10 }) 11 .on( 'dragover', function(event){ 12 console.log('dragover'); 13 event.preventDefault(); 14 let targetRect = event.currentTarget.getBoundingClientRect(); 15 let clientY = event.originalEvent.clientY; 16 let clientYt = targetRect.height/2+targetRect.top; 17 let $ele = $(event.currentTarget); 18 if(clientY<clientYt){ 19 $ele.removeClass('up'); 20 $ele.addClass('down'); 21 } else { 22 $ele.addClass('up'); 23 $ele.removeClass('down'); 24 } 25 }) 26 .on( 'drop', function(event){ 27 let index1 = +event.originalEvent.dataTransfer.getData('Text'); 28 let index2 = i; 29 event.target.parentNode.classList.remove('over'); 30 event.target.parentNode.classList.remove('up'); 31 event.target.parentNode.classList.remove('down'); 32 if(index1!=index2){ 33 let targetRect = event.currentTarget.getBoundingClientRect(); 34 let clientY = event.originalEvent.clientY; 35 let middle = targetRect.height/2+targetRect.top; 36 if(clientY<middle){ 37 list.splice(index2, 0, list[index1]); 38 list.splice(index1+(index1-index2>0?1:0), 1); 39 } else { 40 list.splice(index2+1 , 0, list[index1]); 41 list.splice(index1+(index1-index2>0?1:0) , 1); 42 } 43 } 44 45 }) 46 .on( 'dragleave', function(event){ 47 event.target.parentNode.classList.remove('over'); 48 event.target.parentNode.classList.remove('up'); 49 event.target.parentNode.classList.remove('down'); 50 }); 51 }); 52 },
css样式：（scss的写法）
1 table { 2 width: 100%; 3 border-collapse:collapse; 4 border: 1px solid #DDD; 5 tr { 6 7 td,th { 8 height: 40px; 9 border: 1px #DDD solid; 10 text-align: center; 11 } 12 } 13 14 tr[draggable="true"]{ 15 cursor: move; 16 transition: all .3s; 17 &.up{ 18 background-color: #f9ead5!important; 19 transform: translateY(-50%); 20 } 21 &.down{ 22 background-color: #f9ead5!important; 23 transform: translateY(50%); 24 } 25 } 26 27 thead { 28 background-color: #DDD; 29 } 30 }
注意一点，可以拖拽的tr需要设置,draggable="true"
