丝滑拖拽与排序列表项-Sortable JS

    下面的代码介绍如何使用 Sortable JS 创建拖放排序列表，该控件在时尚的用户界面中提供了流畅的拖拽、移动列表项的功能，其主要功能在于动态排序列表项，通过轻松拖拽的方式来重新排列以增强用户的体验。

如何使用 Sortable JS 创建拖放排序列表

1.为列表创建 HTML 结构。使用以下代码作为模板，在 #team-members 容器内的 <article> 元素中自定义每个团队成员的姓名、角色和社交链接等详细信息。

<div id="team-members">
  <article class="team-member">
      
  </article>
</div>

2.style.css中定义了列表项的样式，确保布局具有视觉吸引力。您可以根据自己网站的主题随意调整样式。提供的 CSS 样式包括布局、背景、阴影等属性。

3.最重要的在底部要引入 Sortable JS：

<script src='./js/Sortable.min.js'></script>

4.最后，在 HTML 文档末尾的 <script> 标记之间，也就是结尾的 </body> 标记之前，加入以下 JavaScript 代码，进行启动js

const dragAndDropItems = document.getElementById('team-members');

new Sortable(dragAndDropItems, {
	animation: 350,
	chosenClass: 'team-member-chosen',
	dragClass: 'team-member-drag'
});