6. 限制列表中某个元素不孕拖动排序 

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3     <head>
  4         <meta charset="UTF-8">
  5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7         <title>拖拽</title>
  8         <style type="text/css">
  9             html,
 10             body {
 11                 height: 100%;
 12                 background-color: pink;
 13                 margin: 0;
 14             }
 15 
 16             .row {
 17                 display: flex;
 18                 justify-content: space-around;
 19             }
 20 
 21             ul {
 22                 width: 40%;
 23                 list-style-type: none;
 24                 padding: 0;
 25             }
 26 
 27             #itxst>li {
 28                 padding: 10px 0;
 29                 margin-bottom: 2px;
 30             }
 31 
 32             .list-group-item {
 33                 background-color: white;
 34             }
 35 
 36             #itxst2>li {
 37                 padding: 10px 0;
 38                 margin-bottom: 2px;
 39             }
 40 
 41             .tinted {
 42                 background-color: yellow;
 43             }
 44 
 45             .blue-background-class {
 46                 background-color: skyblue;
 47             }
 48         </style>
 49     </head>
 50     <body>
 51         <div class="row">
 52             <ul id="itxst">
 53                 <li class="list-group-item">
 54                     <span class="handle"
 55                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 56                     item2
 57                 </li>
 58                 <li class="list-group-item">
 59 
 60                     <span class="handle"
 61                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 62 
 63                     item2
 64 
 65                 </li>
 66                 <li class="list-group-item filtered" style="background-color: red;">
 67 
 68                     <span class="handle"
 69                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 70 
 71                     item2
 72                 </li>
 73                 <li class="list-group-item">
 74                     <span class="handle"
 75                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 76                     item2
 77                 </li>
 78 
 79                 <li class="list-group-item">
 80                     <span class="handle"
 81                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 82                     item2
 83                 </li>
 84             </ul>
 85 
 86             <ul id="itxst2">
 87                 <li class="list-group-item tinted">item1</li>
 88                 <li class="list-group-item tinted">item2</li>
 89                 <li class="list-group-item tinted">item3</li>
 90                 <li class="list-group-item tinted">item4</li>
 91                 <li class="list-group-item tinted">item5</li>
 92                 <li class="list-group-item tinted">item6</li>
 93                 <li class="list-group-item tinted">item7</li>
 94             </ul>
 95         </div>
 96 
 97         <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
 98         <script type="text/javascript">
 99             const el = document.getElementById('itxst')
100             const el2 = document.getElementById('itxst2')
101 
102             new Sortable(el, {
103                 group: 'shar',
104                 filter: '.filtered', // 过滤含有这个类名的元素，不允许拖动,排序
105                 animation: 150
106             })
107 
108             new Sortable(el2, {
109                 group: 'shar',
110                 animation: 150
111             })
112         </script>
113     </body>
114 </html>

 

posted @ 2022-03-15 11:59  sky-su  阅读(44)  评论(0)    收藏  举报