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"

 

转载于:https://www.cnblogs.com/summer0319/p/7445204.html