When working with drag and drop interfaces using SortableJS, you can enhance the user experience by controlling how items behave when dragged. Two powerful configuration options for this are clone and filter. Understanding how each works will help you create more flexible and intuitive interfaces.

The clone option in SortableJS allows you to duplicate an item when it is dragged, rather than moving the original. This is especially useful in scenarios where you want to let users copy items from a source list into a target list, such as copying tasks from a template into a Kanban board. When clone is enabled, dragging an item leaves the original in place and creates a copy in the drop target. This helps prevent accidental removal of template items or defaults that should remain available.

The filter option, on the other hand, lets you specify elements within your list that should not be draggable. This is helpful when you want to include headers, buttons, or other controls inside your list that should not be moved. By setting the filter option to a CSS selector, you can easily prevent certain elements from being picked up and dragged by the user, ensuring only the intended items are sortable.

Combining these options gives you fine-grained control over which items can be dragged, which can be cloned, and which must remain static, allowing you to build more sophisticated and user-friendly drag and drop interfaces.