在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類。animation、onUpdate等）用于控制排序列表的行為和外觀。接下來，在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/
