diff --git a/README.md b/README.md
index d73e4fe..e73323b 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,7 @@ following props:
- `onDragStart` is an optional function which is called once a list item starts
being dragged. Receives the dragged item as an argument.
- `onDragEnd` is an optional function which is called once a list item is no longer being dragged. Receives the dragged item as an argument. It differs from `onMoveEnd` in that it's called even if the user does not reorder any items in the lists, like when an item is just picked up and then dropped.
+- `disabled` is an optional boolean that defaults to false. If set to true, then the element will not be draggable.
A DraggableList instance has the following methods:
@@ -85,7 +86,7 @@ The template component is passed the following props:
to 1 when any item is picked up by the user.
- `dragHandleProps` is an object which should be spread as props on the HTML
element to be used as the drag handle. The whole item will be draggable by the
- wrapped element. See the
+ wrapped element. It includes a `disabled` property that indicates whether dragging is disabled or not. See the
[example](https://github.com/StreakYC/react-draggable-list/blob/master/example/Example.tsx)
to see how it should be used.
- `commonProps` will be set to the same value passed as the `commonProps` prop
diff --git a/example/Example.tsx b/example/Example.tsx
index cbce2d6..f80a648 100644
--- a/example/Example.tsx
+++ b/example/Example.tsx
@@ -167,6 +167,7 @@ export default class Example extends React.Component<{}, ExampleState> {
container={() =>
useContainer ? this._container.current! : document.body
}
+ disabled={false}
/>
diff --git a/src/index.tsx b/src/index.tsx
index 559a5e3..163baf9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -63,6 +63,7 @@ export interface Props {
autoScrollMaxSpeed?: number;
autoScrollRegionSize?: number;
commonProps?: C;
+ disabled?: boolean;
onDragStart?: (draggedItem: I) => void;
onDragEnd?: (draggedItem: I) => void;
}
@@ -90,6 +91,7 @@ export default class DraggableList<
autoScrollMaxSpeed: PropTypes.number.isRequired,
autoScrollRegionSize: PropTypes.number.isRequired,
commonProps: PropTypes.object,
+ disabled: PropTypes.bool
};
public static defaultProps: Partial> = {
springConfig: { stiffness: 300, damping: 50 },
@@ -98,6 +100,7 @@ export default class DraggableList<
constrainDrag: false,
autoScrollMaxSpeed: 15,
autoScrollRegionSize: 30,
+ disabled: false,
};
private readonly _itemRefs: MultiRef> =
new MultiRef();
@@ -606,10 +609,11 @@ export default class DraggableList<
...selectedStyle,
};
const makeDragHandleProps = (getY: () => number | undefined): object => ({
- onMouseDown: (e: React.MouseEvent) =>
- this._handleMouseDown(key, getY(), e),
+ onMouseDown: (e: React.MouseEvent) =>
+ !this.props.disabled && this._handleMouseDown(key, getY(), e),
onTouchStart: (e: React.TouchEvent) =>
- this._handleTouchStart(key, getY(), e),
+ !this.props.disabled && this._handleTouchStart(key, getY(), e),
+ disabled: this.props.disabled
});
const height = this._getItemHeight(key);
return (