jQuery UI Sortable: Disable Child Elements

When working with jQuery UI Sortable, you may find yourself wanting to disable dragging on certain child elements within your sortable region. This can be accomplished through the use of the cancel option.

The cancel Option

The cancel option allows you to specify a selector for any elements that should be excluded from sorting. To disable sorting on child elements, simply target them using a selector and add their classes or IDs to the cancel option.

Here's an example:

$( "#sortable" ).sortable({
  cancel: ".child-elem"
});

In this example, any elements with the class "child-elem" will be disabled from sorting.

Caveats

Keep in mind that disabling child elements from sorting will also prevent them from being sorted alongside their parent elements. If you need more granular control over how child elements are sorted, you may need to look into customizing the helper option or writing a custom stop event.

Additionally, if you need to dynamically add or remove child elements from the cancel option, you can do so using the option method:

$( "#sortable" ).sortable( "option", "cancel", ".new-child-elem" );

Final Thoughts

Using the cancel option to disable child elements from sorting is a useful technique when working with jQuery UI Sortable. However, be aware of its limitations and consider other customizations if you need more control over how elements are sorted.