https://github.com/lowesyang/drag-list-react

A component of Drag&Drop,Touch enabled and Reordering list for React
https://github.com/lowesyang/drag-list-react

drag-and-drop react react-component reordering

Last synced: 1 day ago
JSON representation

A component of Drag&Drop,Touch enabled and Reordering list for React

• Host: GitHub
• URL: https://github.com/lowesyang/drag-list-react
• Owner: lowesyang
• License: mit
• Created: 2017-08-05T09:04:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-04T14:23:22.000Z (over 6 years ago)
• Last Synced: 2024-08-08T15:24:31.084Z (3 months ago)
• Topics: drag-and-drop, react, react-component, reordering
• Language: JavaScript
• Homepage:
• Size: 81.1 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Drag-list-react

[![npm](https://img.shields.io/badge/npm-v1.0.5-green.svg)](https://www.npmjs.com/package/drag-list-react)

[![Build Status](https://travis-ci.org/yyh1102/Drag-list-react.svg?branch=master)](https://travis-ci.org/yyh1102/Drag-list-react)

[![npm](https://img.shields.io/npm/l/express.svg)](https://opensource.org/licenses/mit-license.php)

A HOC component of Drag&Drop,Touch enabled and Reordering list for React.

[demo](https://yyh1102.github.io/react-drag-list/)

## Install

```bash

npm install drag-list-react --save

```

## Usage

```javascript

import React from 'react';

import DragList from 'drag-list-react';

// Notice: Every item in your data list must contains property 'id'.

// DragList component uses 'id' as the key of array.

const list=[

  {

    id:1,

    name:'Item1'

  },{

    id:2,

    name:'Item2'

  },{

    id:3,

    name:'Item3'

  },{

    id:4,

    name:'Item4'

  }

]

// list item

// Each properties in data list will be passed to the children

const listItem=({name})=>(

  
{name}

)


// Placeholder when dragging items

// Props is necessary because placeholder will receive style props from component.

const Placeholder=(props)=>(

  
  

)


const App = () => {

  // Use placeholder

  const List = DragList(listItem,Placeholder);

  // Or not use placeholder

  // const List = DragList(listItem);

  return (

    

  )

};

```

## API

Properties

| name | type | default | description |

|------|------|---------|-------------|

| disabled | Boolean | false | Disabled dragging and dropping |

| type | String |       | Type of drag list.The list will be horizontal when it is set ```inline```.|

| isLongPress | Boolean | false | Should dragging be triggered by long pressing or not |

| delay | Number | 300(ms) | The delay time of long pressing |

| gutter | Number | 0 | The spacing between two items |

| onDragBegin | Function(item,index,element) | | Prams: ```item``` is the dragging element of your data array; ```index``` is the index of the dragging item in your data array; ```element``` is the real DOM node of your dragging item.

| onDragEnd | Function(list) | | Param: ```list``` is the final list when dragging ends. |