Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

simple-drag-and-drop

1.0.2 • Public • Published

simple-drag-and-drop (Compatiable with React, Angular, VueJS)

Install

npm install simple-drag-and-drop --save

Usage

Use in Plain Javascript

<body>
  <div class="dd-container" id="dd1">
    <div>
      <h2>Title 1</h2>
    </div>
    <div>
      <h1>Title 2</h1>
    </div>
    <div>
      Title 5
    </div>
  </div>
  <div class="dd-container" id="dd2">
    <div>
      Title 3
    </div>
    <div>
      Title 4
    </div>
  </div>
  <div class="dd-container" id="dd3">
    <div>
      Title 7
    </div>
    <div>
      Title 8
    </div>
  </div>
</body>
<script>
  window.onload = () => {
    let dd = new DragAndDrop();
    let ddc1 = new DragAndDropContaner("dd1", dd);
    let ddc2 = new DragAndDropContaner("dd2", dd);
    let ddc3 = new DragAndDropContaner("dd3", dd);
  };
</script> 
<style>
  .dd-container {
    float: left;
    padding: 10px;
    border: 2px green dotted;
    margin: 10px 10px;
  }
  .dd-container > div {
    padding: 5px;
    border: 2px blue dotted;
    margin: 5px 5px;
  }
</style> 

Use in React

import React, { Component } from "react";
import "./App.css";
import { DragAndDrop, DragAndDropContaner } from "simple-drag-and-drop";
 
export class App extends Component {
  constructor(props) {
    super(props);
    this.dd = null;
    this.ddc1 = null;
    this.ddc2 = null;
    this.ddc3 = null;
  }
  initDD() {
    this.ddc1.reInit();
    this.ddc2.reInit();
    this.ddc3.reInit();
  }
  componentWillMount() {}
  componentDidMount() {
    this.dd = new DragAndDrop();
    this.dd.setRender(true);
    this.dd.setOnMovedCallback(result => {
      console.log(result);
    });
    this.ddc1 = new DragAndDropContaner("dd1", this.dd);
    this.ddc2 = new DragAndDropContaner("dd2", this.dd);
    this.ddc3 = new DragAndDropContaner("dd3", this.dd);
    setTimeout(() => {
      this.initDD();
    }, 100);
  }
  componentWillUnmount() {
    if (this.ddc1 != null) this.dds1.remove();
    if (this.ddc2 != null) this.dds2.remove();
    if (this.ddc3 != null) this.dds3.remove();
  }
  render() {
    return (
      <div className="App">
        <div class="dd-container" id="dd1">
          <div>
            <h2>Title 1</h2>
          </div>
          <div>
            <h1>Title 2</h1>
          </div>
          <div>Title 5</div>
        </div>
        <div class="dd-container" id="dd2">
          <div>Title 3</div>
          <div>Title 4</div>
        </div>
        <div class="dd-container" id="dd3">
          <div>Title 7</div>
          <div>Title 8</div>
        </div>
      </div>
    );
  }
}
 
export default App;
 
App.css
 
.dd-container {
  float: left;
  min-height: 70px;
  min-width: 50px;
  border: 2px green dotted;
  margin: 10px 10px;
}
.dd-container > div {
  padding: 5px;
  border: 2px blue dotted;
  margin: 5px 5px;
}

Use in Angular

Documentation Coming Soon

Use in VueJS

Documentation Coming Soon

Options

Function

Name Type Description
reInit() n/a Re Initilizes Drag and Drop Container Items(Usage: Call it after setting the state in React)
remove() n/a Removes all Event listeners. (Usage: Call it when component is unmounted)

Install

npm i simple-drag-and-drop

DownloadsWeekly Downloads

0

Version

1.0.2

License

ISC

Unpacked Size

24.4 kB

Total Files

6

Last publish

Collaborators

  • avatar