[2016.1.12] React.js 를 활용한 drag & drop list 예제

요즘 한창 뜨고 있다는 React.js 로 구현된 드래그 & 드랍 예제입니다.

아래는 React.js 구현 소스입니다.

var placeholder = document.createElement("li");
placeholder.className = "placeholder";

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...props};
  }
  dragStart(e) {
    this.dragged = e.currentTarget;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.dragged);
  }
  dragEnd(e) {
    this.dragged.style.display = 'block';
    this.dragged.parentNode.removeChild(placeholder);

    // update state
    var data = this.state.colors;
    var from = Number(this.dragged.dataset.id);
    var to = Number(this.over.dataset.id);
    if(from < to) to--;
    data.splice(to, 0, data.splice(from, 1)[0]);
    this.setState({colors: data});
  }
  dragOver(e) {
    e.preventDefault();
    this.dragged.style.display = "none";
    if(e.target.className === 'placeholder') return;
    this.over = e.target;
    e.target.parentNode.insertBefore(placeholder, e.target);
  }
    render() {
    var listItems = this.state.colors.map((item, i) => {
      return (
        <li 
          data-id={i}
          key={i}
          draggable='true'
          onDragEnd={this.dragEnd.bind(this)}
          onDragStart={this.dragStart.bind(this)}>{item}</li>
      )
     });
        return (
            <ul onDragOver={this.dragOver.bind(this)}>
        {listItems}
      </ul>
        )
    }
}
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            colors: ['Red', 'Green', 'Blue', 'Yellow', 'Black', 'White', 'Orange']
        }
    }
    render() {
        return (
            <div>
        <List colors={this.state.colors} />    
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

​

클래스며 생성자며 오버라이딩하는 모습까지.. 볼수록 더 파고 싶어지는군요!

조만간 react 제대로 공부해봐야겠습니다.

근데 이거.... IE 11 에서도 작동을 안하네요...ㄷㄷ.. 크롬 등에서 확인해보세요~

React.js 관련 글 보기

2015/09/30 - [Dev. 웹/관련 기술] - [HTML/ CSS/ JavaScript preprocessor & Template] Haml, Markdown, Slim, Jade, Sass, SCSS, LESS, Stylus, CoffeeScript, LiveScript, Traceur 정리..

2015/10/08 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.10.08] React.js + Babel + Stylus 활용 예제 - 리스트 출력

2015/12/01 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.12.01] react.js 를 활용한 To-Do List

간단한 사용 예제 및 Demo

See the Pen React Drag & Drop List by Adam Moore (@adamaoc) on CodePen.