raisezhang / React Drag Listview
Licence: mit
A simple draggable list component for React
Stars: ✭ 161
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Drag Listview
Lean Mean Drag And Drop
Drag&Drop Sorting and Reordering script for complex nested structures
Stars: ✭ 107 (-33.54%)
Mutual labels: draggable
Dnd Kit
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Stars: ✭ 3,456 (+2046.58%)
Mutual labels: draggable
Poweradapter
Adapter for RecyclerView(only 21KB).RecyclerView万能适配器(仅21KB)
Stars: ✭ 112 (-30.43%)
Mutual labels: draggable
React Kanban Dnd
📋 Open source kanban board built with React
Stars: ✭ 121 (-24.84%)
Mutual labels: draggable
React Draggable Tab
Atom like draggable tab react component
Stars: ✭ 133 (-17.39%)
Mutual labels: draggable
Muuri
Infinite responsive, sortable, filterable and draggable layouts
Stars: ✭ 9,797 (+5985.09%)
Mutual labels: draggable
Vue3 Draggable Resizable
[Vue3 组件] 用于拖拽调整位置和大小的的组件,同时支持冲突检测,元素吸附对齐,实时参考线。
Stars: ✭ 159 (-1.24%)
Mutual labels: draggable
React Drag Drawer
A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop
Stars: ✭ 135 (-16.15%)
Mutual labels: draggable
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+868.94%)
Mutual labels: draggable
Draggablemenu
A draggable menu that shows a thumbnail preview of an image grid
Stars: ✭ 117 (-27.33%)
Mutual labels: draggable
React Dragline
🐼Guide lines and magnetic adsorption to better align draggable elements in React.
Stars: ✭ 134 (-16.77%)
Mutual labels: draggable
Flowy Vue
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Stars: ✭ 107 (-33.54%)
Mutual labels: draggable
Imageviewer
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+1073.29%)
Mutual labels: draggable
Ant Design Draggable Modal
The Modal from Ant Design, draggable.
Stars: ✭ 105 (-34.78%)
Mutual labels: draggable
Vue Responsive Dash
Responsive, Draggable & Resizable Dashboard (Grid) for Vue
Stars: ✭ 128 (-20.5%)
Mutual labels: draggable
Draggableimageviewer
大图浏览 & 图片查看&拖拽退出。类似于微信、B站的图片 & 视频浏览器。
Stars: ✭ 153 (-4.97%)
Mutual labels: draggable
react-drag-listview
React drag list component.
install
Example
Development
npm install
npm start
Usage
const ReactDragListView = require('react-drag-listview');
class Demo extends React.Component {
constructor(props) {
super(props);
const data = [];
for (let i = 1, len = 7; i < len; i++) {
data.push({
title: `rows${i}`
});
}
this.state = {
data
};
}
render() {
const that = this;
const dragProps = {
onDragEnd(fromIndex, toIndex) {
const data = [...that.state.data];
const item = data.splice(fromIndex, 1)[0];
data.splice(toIndex, 0, item);
that.setState({ data });
},
nodeSelector: 'li',
handleSelector: 'a'
};
return (
<ReactDragListView {...dragProps}>
<ol>
{this.state.data.map((item, index) => (
<li key={index}>
{item.title}
<a href="#">Drag</a>
</li>
))}
</ol>
</ReactDragListView>
);
}
}
API
Properties
Name | Type | Default | Description |
---|---|---|---|
onDragEnd | Function(fromIndex, toIndex) | on drag end callback, required | |
nodeSelector | String | tr | get drag item cssQuery |
handleSelector | String | nodeSelector | get drag handle cssQuery |
ignoreSelector | String | ignore node list | |
enableScroll | Boolean | true | whether use auto scroll for dragging |
scrollSpeed | Number | 10 | scroll speed |
lineClassName | String | get dragLine's className, css properties must be use !important |
License
react-drag-listview is released under the MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].