SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.76k stars 3.7k forks source link

[bug] `draggable` params doesn't behave the same if it's not present vs undefined / null / empty / false #2378

Closed jamesst20 closed 5 days ago

jamesst20 commented 6 months ago

Versions

SortableJS 1.15.2

Reproduction

CodeSandbox

Why this is trouble

I need to write a wrapper in my app that takes optional params like

type SortableItem = { position: number };
type UseSortableProps = { draggable?: string; handle?: string };

export const useSortable = ({ draggable, handle }: UseSortableProps) => {
  ...
  new Sortable(node, {
      animation: 150,
      dragClass: "bg-slate-200",
      ghostClass: "bg-slate-200",
      handle,
      draggable,
      onEnd: (e) => (items = updatePosition(items, e.oldIndex!, e.newIndex!, offset)),
    });
}

I have an ugly workaround for now but I don't think this should behave like this.

owen-m1 commented 5 days ago

This isn't necessarily a bug, with handle as undefined it works as expected. draggable should never be undefined if you want sorting to work, the default value of draggable is either '>li' or '>*' depending on whether the parent is a list element. If you define the property in the option it will always override the default value.