https://github.com/markshust/drop-target-rank

Easily calculate the new rank value for drag-drop items given source & target values
https://github.com/markshust/drop-target-rank

Last synced: 2 days ago
JSON representation

Easily calculate the new rank value for drag-drop items given source & target values

• Host: GitHub
• URL: https://github.com/markshust/drop-target-rank
• Owner: markshust
• License: mit
• Created: 2016-08-08T14:13:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-18T03:26:10.000Z (about 6 years ago)
• Last Synced: 2024-10-30T10:37:11.628Z (10 days ago)
• Language: JavaScript
• Size: 88.9 KB
• Stars: 3
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# drop-target-rank

Easily calculate the new rank value for drag-drop items given source & target values.

```

npm install drop-target-rank

```

## Params

`(array, source, target, options)`

* `array`: main array containing all rank objects

* `source`: rank object that is being dragged

* `target`: rank object the source is being dragged onto

* `options`

    * `key` (default: `'_id'`): unique property id of the rank object

    * `log` (default: `false`): enable logging to console

    * `rank` (default: `'rank'`): ranking property

## Usage

```

import dropTargetRank from 'drop-target-rank';

import sortBy from 'lodash.sortby';

// Array should contain a list of objects

// Objects should always have a rank property that initially starts at 1

const foo = {

  _id: '28NKN243Qvzbp4NBs',

  name: 'Foo',

  rank: 1,

};

const bar = {

  _id: '7dtGG6FParwqjnaTe',

  name: 'Bar',

  rank: 2,

};

const baz = {

_id: 'NDwXkDQQQHsRENzR9',

  name: 'Baz',

  rank: 3,

};

// Array can be in any order (as of version 1.1.0)

let array = [foo, baz, bar];

// Then call dropTargetRank with array, source, target, and optional params

// This method calculates the new source rank value automatically

const newRank = dropTargetRank(array, foo, bar, { log: true });

// side effect from log: true

if (newRank) { // always check value, will return null on error

  console.log(newRank); // outputs 2.5, placing Foo between Bar and Baz

}

```