Trong các ứng dụng web tương tác, khả năng kéo thả (drag-and-drop) đóng vai trò quan trọng trong trải nghiệm người dùng. Thư viện Sortable.js hỗ trợ tính năng này một cách linh hoạt, đặc biệt khi làm việc với các danh sách rỗng. Một trong những tùy chọn cấu hình then chốt giúp giải quyết vấn đề này là emptyInsertThreshold.

emptyInsertThreshold là gì?

Đây là một tham số trong cấu hình của Sortable.js, xác định khoảng cách tối đa (tính bằng pixel) giữa con trỏ chuột và vùng chứa rỗng để cho phép chèn phần tử đang được kéo.

• Giá trị mặc định: 5px
• Mục đích: Tạo vùng "hấp dẫn" xung quanh danh sách rỗng, giúp người dùng dễ dàng thả phần tử vào.

Tại sao cần cấu hình này?

Khi danh sách không có phần tử nào, vùng thả trở nên vô hình hoặc quá nhỏ, gây khó khăn trong thao tác, đặc biệt trên thiết bị cảm ứng. emptyInsertThreshold mở rộng vùng nhận diện, cải thiện độ chính xác và phản hồi trực quan.

Cách sử dụng

Dưới đây là ví dụ cấu hình cơ bản:

new Sortable(containerElement, {
    group: 'shared-group',
    emptyInsertThreshold: 12
});

Ví dụ đầy đủ với hai danh sách — một có nội dung, một rỗng:

<div id="source-list">
  <div>Mục A</div>
  <div>Mục B</div>
</div>

<div id="target-empty"></div>

<script>
  const sharedGroup = 'items';
  new Sortable(document.getElementById('source-list'), {
    group: sharedGroup,
    emptyInsertThreshold: 10
  });
  new Sortable(document.getElementById('target-empty'), {
    group: sharedGroup,
    emptyInsertThreshold: 10
  });
</script>

Gợi ý thực hành

• Thiết bị di động: Đặt giá trị từ 8–12px để bù đắp độ chính xác thấp của thao tác chạm.
• Máy tính để bàn: Giá trị 5–8px thường đủ tốt.
• Tắt tính năng: Gán emptyInsertThreshold: 0 nếu muốn vô hiệu hóa hoàn toàn.

Giải pháp bổ trợ bằng CSS

Bên cạnh cấu hình JavaScript, bạn có thể dùng CSS để tạo vùng hiển thị cho danh sách rỗng:

.draggable-container:empty {
    min-height: 40px;
    padding: 10px 0;
    border: 1px dashed #ccc;
}

Cách tiếp cận này cung cấp gợi ý trực quan, giúp người dùng nhận biết nơi có thể thả phần tử.

Nguyên lý hoạt động

Khi kéo một mục, Sortable.js sẽ:

1. Quét các vùng chứa cùng nhóm (group) đang rỗng.
2. Tính toán khoảng cách từ con trỏ đến biên của vùng chứa đó.
3. Nếu khoảng cách ≤ emptyInsertThreshold, vùng chứa được đánh dấu là hợp lệ để chèn.
4. Khi thả, phần tử được thêm vào vị trí đã xác định.

Xử lý sự cố thường gặp

• Không hoạt động: Kiểm tra lại thuộc tính group — các danh sách phải cùng nhóm để cho phép kéo thả qua lại.
• Phản hồi chậm trên điện thoại: Tăng giá trị emptyInsertThreshold lên 10–15px.
• Xung đột với thư viện khác: Đảm bảo không có thư viện kéo thả nào khác can thiệp vào cùng phần tử DOM.