| import React from "react"; |
| import { render } from "react-dom"; |
| import shortid from "shortid"; |
| import dragula from "react-dragula"; |
| import "react-dragula/dist/dragula.min.css"; |
| import "bootstrap/dist/css/bootstrap.css"; |
|
|
| class App extends React.Component { |
| constructor() { |
| super(); |
|
|
| this.dnd = null; |
| this.mirrorContainer = null; |
| this.drake = null; |
|
|
| this.initDrake = this.initDrake.bind(this); |
| this.autoScrollDrake = this.autoScrollDrake.bind(this); |
| this.clearScrollTime = this.clearScrollTime.bind(this); |
| } |
| componentDidMount() { |
| this.initDrake(); |
| } |
|
|
| componentDidUpdate() { |
| if (this.drake) this.drake.destroy(); |
| this.initDrake(); |
| } |
|
|
| initDrake() { |
| this.drake = dragula([this.dnd], { |
| revertOnSpill: true, |
| moves: (el, container, handle) => { |
| console.log(handle); |
| return handle.dataset.type === "move"; |
| }, |
| mirrorContainer: this.mirrorContainer |
| }); |
|
|
| this.drake.on("drop", () => {}); |
|
|
| this.drake.on("out", (el, container) => { |
| this.clearScrollTime(this.scrollTime); |
| console.log( |
| this.mirrorContainer.querySelector(`[data-id=${el.dataset.id}]`) |
| ); |
| this.autoScrollDrake( |
| container, |
| this.mirrorContainer.querySelector(`[data-id=${el.dataset.id}]`) |
| ); |
| }); |
|
|
| this.drake.on("over", () => { |
| this.clearScrollTime(this.scrollTime); |
| }); |
|
|
| this.drake.on("dragend", () => { |
| this.clearScrollTime(this.scrollTime); |
| }); |
|
|
| this.drake.on("cancel", () => { |
| this.clearScrollTime(this.scrollTime); |
| }); |
| } |
|
|
| autoScrollDrake(container, mirrorContainer) { |
| const scroll = container; |
| const { height: clientHeight } = container.getBoundingClientRect(); |
| const { scrollTop } = container; |
| const { y } = mirrorContainer.getBoundingClientRect(); |
|
|
| if (clientHeight < y) { |
| this.scrollTime = setInterval(() => { |
| scroll.scrollTop += 10; |
| }, 20); |
| } |
|
|
| if (scrollTop > y) { |
| this.scrollTime = setInterval(() => { |
| scroll.scrollTop -= 10; |
| }, 20); |
| } |
| } |
|
|
| clearScrollTime() { |
| if (this.scrollTime) clearInterval(this.scrollTime); |
| } |
|
|
| render() { |
| return ( |
| <div className="container"> |
| <h1>Dragula AutoScroll with React</h1> |
|
|
| <div |
| className="panel panel-default" |
| style={{ |
| height: 300, |
| overflowX: "hidden", |
| overflowY: "auto" |
| }} |
| ref={dnd => { |
| this.dnd = dnd; |
| }} |
| > |
| <ul className="list-group"> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Cras justo odio |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Dapibus ac facilisis in |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Morbi leo risus |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Porta ac consectetur ac |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Vestibulum at eros |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Cras justo odio |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Dapibus ac facilisis in |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Morbi leo risus |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Porta ac consectetur ac |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Vestibulum at eros |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Cras justo odio |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Dapibus ac facilisis in |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Morbi leo risus |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Porta ac consectetur ac |
| </li> |
| <li |
| data-id={shortid.generate()} |
| data-type="move" |
| className="list-group-item" |
| > |
| Vestibulum at eros |
| </li> |
| </ul> |
| </div> |
| <div |
| ref={mirrorContainer => { |
| this.mirrorContainer = mirrorContainer; |
| }} |
| /> |
| </div> |
| ); |
| } |
| } |
|
|
| render(<App />, document.getElementById("root")); |