react-drag-picker

drag select element by react.

example

install

npm i react-drag-picker --save

using

import DragPicker from 'react-drag-picker';

const styles = {position: 'relative'};

<div style={styles}>
  <DragPicker>
    <div key="1">1</div>
    <div key="2">2</div>
    <div key="3">3</div>
  </DragPicker>
</div>

props

| props name | type | description | default | isRequired |------------|------|-------------------------------------------------|---------|----| |onChange|function|return selected item key values| () => {}| true | |selectedStyle|Object|selected style|{backgroundColor: '#64B5F6', color: 'white'}|false| |className|string|parent dom(div) class name|''|false| |selectionBoxStyle|Object|selected box style|{background: 'rgba(0, 162, 255, 0.4)', position: 'absolute', zIndex: 100000}|false| |enabled|boolean|can enabled|true|false| |id|string|parent dom id|selectionBox|false| |disabledkeys|array|don't allow to select items key. eg: ['11', '17']|[]|false| |disabledClass|string|disabled item's class name|''|false| |maxLength|number|selected max number, 0 is no limited|0|false| |skipDisabled|boolean|Skips disabled items whether to continue selecting items|false|false|

function

| function name | description | params |------------|-------------------------------------------------|---| |clearAll|clear selected item, by refs callback||

example

import DragPicker from 'react-drag-picker';

const styles = {position: 'relative'};

<div style={styles}>
  <DragPicker>
    {
      Array.from({length: 10}, (v, k) => k).map(i => <div className={'select-box'} key={i}>{i + 1 }</div>)
    }
  </DragPicker>
</div>

.select-box {
  background: #f0f0f0;
  width: 30px;
  height: 120px;
  text-align: center;
  line-height: 104px;
  display: inline-block;
  font-size: 14px;
  color: #5A5A5A;
  box-sizing: border-box;
  border: 1px solid #5A5A5A;
}

Project form react-drag-select