ドラッグアンドドロップリスト


我々の反応アプリケーションでは、リストの形式でいくつかのデータを整理します.順序リストと順序なしリストにデータを表示できます.アプリケーションでは、リスト項目の順序を設定する必要があります.だから、これを行うには我々は、UIからリストの順序を設定するのは簡単ですドラッグアンドドロップリストを作成することができます.

ドラッグアンドドロップリストを作成する


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: ['PHP', 'MYSQL', 'REACT', 'LARAVEL']
        }
    }
    render() {
        return (
            <div>
        <List colors={this.state.colors} /> 
            </div>
        )
    }
}

スタイルリスト


ul {
  list-style: none;
  margin:0;
  padding:0;
  border: 5px solid #e1e1e1;
  box-shadow: 1px 3px 8px #888; 
}

li {
  padding: 10px 15px;
  background:#eee;
  &:hover {
    background: darken(#eee, 5%);
  }
}

.placeholder {
  background: rgb(255,240,120);
  &:before {
    content: "Drop here";
    color: rgb(225,210,90);
  }
}
してください共有購読し、あなたのためにもっと書くことを動機に肯定的なフィードバックを与える.
より多くのチュートリアルのために、visit my website .
ありがとう
ハッピーコーディング