Axxwell Drag

AxxwellDrag is a simple library for dragging and dropping elements from a list.

Installation

Install AxxwellDrag with npm

  npm install axxwelldrag

Usage/Examples

import AxxwellDrag from "axxwelldrag";

const [playlist, setPlaylist] = useState([
  { id: 1, name: "Song 1" },
  { id: 2, name: "Song 2" },
  { id: 3, name: "Song 3" },
]);

Usage:

<AxxwellDrag
  list={playlist}
  setList={setPlaylist}
  config={{
    disableBorder: true,
    borderColor: "green",
    direction: "top",
    classes: ["toUp", "toDown"],
  }}
  callback={callback} //returns updated List after drop
>
  //Your list
  {playlist.map((item, i) => (
    <div key={i}>{item.name}</div> //Song 1...

    //If you are using an React component like:
    <MyComponent item={item} />
    //Define props in your component, like:
    function MyComponent({ item, ...props}){
      return (
         <div {...props}>{item.name}</div>
      )
    }
  ))}
</AxxwellDrag>

Additional Info

When the mouse is up or to the left, a class is added to the element it is on top of dragBefore, which you can style as you wish in your CSS; example:

div.dragBefore {
  background: "red";
  /* ...other styles */
  /* The default to test is border-top: red* */
}

When the mouse is down or to the right, a class is added to the element it is on top of dragAfter, which you can style as you wish in your CSS; example:

div.dragAfter {
  background: "red";
  /* ...other styles */
  /* The default to test is border-bottom: red* */
}

Documentation

Access https://github.com/chrisaxxwell/axxwelldrag

- Config?

disabledBorder: This parameter disables the default border for test. (default is false);

borderColor: This parameter changes border color. (default is red);

direction: Direction to your move top to movement to top and bottom or left to left or right directions (default istop);

classes: Classes to customize in your css, default is ["dragBefore", "dragAfter"], define as you wish.

- Its free?

YUP totally free

Authors

• @chrisaxxwell

Feedback

If you have any feedback, please reach out to us at [email protected]

Support

For support, email [email protected] or join our Slack channel.

License

MIT