A simple draggable list component.
A simple draggable list component.
npm install -S @jswork/react-draggable-list
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
onChange | func | false | noop | When sortable list changed. |
items | array | false | [] | The list data source. |
template | func | false | noop | The list item template. |
rowKey | any | false | 'id' | The uniq row key. |
options | object | false | - | The core sortable component options (@sortable: https://github.com/SortableJS/Sortable). |
@import "~@jswork/react-draggable-list/dist/style.css";
// or use sass
@import "~@jswork/react-draggable-list/dist/style.scss";
// customize your styles:
$react-draggable-list-options: ()
import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDraggableList from '@jswork/react-draggable-list';
import './assets/style.scss';
class App extends React.Component {
state = {
items: [
{
title: '猫妖传1',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传2',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传3',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传4',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传5',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传6',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
}
],
items2: [
{
title: '猫妖传1',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传2',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传3',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传4',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传5',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
},
{
title: '猫妖传6',
img: 'http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg',
description: '讲述大唐传奇的奇幻剧'
}
]
};
onChange = (e) => {
const { value } = e.target;
console.log('value: ', value);
};
render() {
return (
<ReactDemokit
className="p-3 app-container"
url="https://github.com/afeiship/react-draggable-list">
<ReactDraggableList
className="dg1"
onChange={this.onChange}
template={({ item }) => <div>{item.title}</div>}
rowKey="title"
items={this.state.items}
/>
<ReactDraggableList
className="dg2"
onChange={this.onChange}
template={({ item }) => <div>{item.title}</div>}
rowKey="title"
items={this.state.items2}
/>
</ReactDemokit>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Code released under the MIT license.