溫馨提示×

js sortable能自定義占位符嗎

js
小樊
82
2024-10-23 02:04:08
欄目: 編程語言

在JavaScript的Sortable庫中，沒有直接的方法來自定義占位符。但是，你可以通過以下步驟來實現(xiàn)自定義占位符的效果：

  1. 創(chuàng)建自定義占位符元素：首先，你需要創(chuàng)建一個自定義的元素來作為占位符。這個元素可以包含任何你想要顯示的內(nèi)容，比如顏色塊、圖片或者文字提示等。
  2. 設(shè)置占位符樣式：你可以通過CSS來設(shè)置占位符元素的樣式，使其在列表中占據(jù)適當(dāng)?shù)目臻g，并與其他列表項有所區(qū)別。
  3. 在Sortable中指定占位符：在初始化Sortable時，你可以使用placeholder選項來指定一個函數(shù)，該函數(shù)會返回一個DOM元素作為占位符。你可以在這個函數(shù)中創(chuàng)建并返回你的自定義占位符元素。

下面是一個簡單的示例代碼，展示了如何使用自定義占位符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable with Custom Placeholder</title>
    <style>
        .list-item {
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }
        .custom-placeholder {
            background-color: #f0f0f0;
            height: 30px; /* 設(shè)置占位符高度 */
            line-height: 30px; /* 設(shè)置占位符內(nèi)文本垂直居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <ul id="sortable-list">
        <li class="list-item">Item 1</li>
        <li class="list-item">Item 2</li>
        <li class="list-item">Item 3</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        const sortable = new Sortable(document.getElementById('sortable-list'), {
            placeholder: function(item) {
                // 創(chuàng)建自定義占位符元素
                const placeholder = document.createElement('div');
                placeholder.classList.add('custom-placeholder');
                placeholder.textContent = 'Drag to reorder';
                return placeholder;
            }
        });
    </script>
</body>
</html>

在這個示例中，我們創(chuàng)建了一個自定義的占位符元素，它包含了一些文本提示。在Sortable初始化時，我們指定了一個函數(shù)來返回這個自定義占位符元素。這樣，在拖動列表項時，就會顯示這個自定義的占位符。

0 踩