js sortable能自定义拖拽手柄吗

avatar
作者
猴君
阅读量:0

在JavaScript中,Sortable.js库确实允许您自定义拖拽手柄。以下是一个示例,展示了如何使用Sortable.js自定义拖拽手柄:

首先,确保您已在项目中引入了Sortable.js库。您可以从官方网站(https://sortablejs.github.io/Sortable/)下载或使用CDN链接。

接下来,创建一个HTML列表,我们将在其中添加可排序的项目:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Sortable.js Custom Handle Example</title>     <style>         ul {             list-style-type: none;             padding: 0;         }         li {             padding: 10px;             background-color: #f0f0f0;             margin-bottom: 5px;             cursor: move;         }     </style> </head> <body>     <ul id="sortableList">         <li>Item 1</li>         <li>Item 2</li>         <li>Item 3</li>         <li>Item 4</li>         <li>Item 5</li>     </ul>      <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>     <script>         // 在这里添加JavaScript代码     </script> </body> </html> 

现在,我们将使用Sortable.js自定义拖拽手柄。在<script>标签内添加以下JavaScript代码:

const sortableList = document.getElementById('sortableList');  new Sortable(sortableList, {     animation: 150,     onUpdate: function (event) {         console.log('Sorting updated:', event);     },     handle: '.handle', // 选择器,用于指定哪些元素包含拖拽手柄     draggable: '.item', // 选择器,用于指定哪些元素可被拖拽     ghostClass: 'ghost', // 类名,用于在拖拽过程中显示幽灵元素     chosenClass: 'chosen', // 类名,用于在选定元素上添加样式     tolerance: 0, // 鼠标与目标元素的距离,在此范围内开始拖拽     forceFallback: true, // 如果为true,则在无法拖拽时启用回退功能     swapThreshold: 0.65, // 交换两个元素所需的距离比例     preventOnFilter: false, // 如果为false,则在过滤元素时不会触发拖拽事件 }); 

在这段代码中,我们定义了以下选项:

  • handle: 用于指定哪些元素包含拖拽手柄。在这个例子中,我们选择.handle类。
  • draggable: 用于指定哪些元素可被拖拽。在这个例子中,我们选择.item类。
  • 其他选项(如animationonUpdate等)用于控制排序列表的行为和外观。

接下来,在HTML中添加一些带有.handle类的元素,以便我们可以拖动它们来调整列表顺序:

<ul id="sortableList">     <li class="item"><span class="handle"></span>Item 1</li>     <li class="item"><span class="handle"></span>Item 2</li>     <li class="item"><span class="handle"></span>Item 3</li>     <li class="item"><span class="handle"></span>Item 4</li>     <li class="item"><span class="handle"></span>Item 5</li> </ul> 

现在,您应该能够看到自定义拖拽手柄的效果。您可以根据需要调整样式和选项。更多关于Sortable.js的信息和示例,请参阅官方文档:https://sortablejs.github.io/Sortable/

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!