0.1.0-alpha.5 • Published 7 years ago
react-jquery-sortable v0.1.0-alpha.5
react-jquery-sortable
Usage
- Include jQuery and jQuery UI globally (this is required because of a jQuery UI limitation)
- Configure webpack to support
import '$' from 'jquery'
(seeexternals
inwebpack.config.common.js
) - Create the
Sortable
(seeExample.jsx
).
Code Example
import Sortable from 'react-jquery-sortable';
import Widget from './Widget';
function Example({ onChange, widgets, ...props }) {
// - Sortable options are passed as props
// - When an item is dropped, onChange is called with a list of ids that represents the new order
// - Each child must have an id. The id is used to identify the order of the children.
return (
<Sortable
forcePlaceholderSize
handle=".handle"
onChange={order => onChange(order)}
placeholder="placeholder"
{...props}
>
{widgets.map(widget => (
<Widget
handleClassName=".handle"
id={widget.get('id')}
key={widget.get('id')}
widget={widget}
/>
))}
</Sortable>
);
}
Setup
yarn
yarn start
# Visit http://localhost:8080
0.1.0-alpha.5
7 years ago
0.1.0-alpha.4
7 years ago
0.1.0-alpha.3
7 years ago
0.1.0-alpha.2
7 years ago
0.1.0-alpha.1
7 years ago