Skip to content

Nerimity/solid-sortablejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7ae3526 Â· Dec 23, 2023

History

40 Commits
Aug 13, 2022
Jan 26, 2023
Sep 5, 2023
Aug 13, 2022
Aug 13, 2022
Aug 13, 2022
Aug 13, 2022
Apr 13, 2023
Aug 13, 2022
Dec 23, 2023
Dec 5, 2023
Jan 26, 2023
Dec 5, 2023

Repository files navigation

solid-sortablejs

Solid SortableJS

Easily sort your list. solid-sortablejs is using the SortableJS library to sort your list.
This library is in WIP

Quick start

Install it:

npm install solid-sortablejs

Use it:

import Sortable from "solid-sortablejs";
import {createStore} from "solid-js/store";
import { JSX } from "solid-js";

const App = () => {
  const itemStyles: JSX.CSSProperties = {"user-select": "none", background: "green", padding: "10px", "min-width": "100px", margin: "5px", "border-radius": "4px", color: "white"};
  const containerStyles = {display: "inline-block", background: "gray", padding: "10px", "border-radius": "4px"};

  const [items, setItems] = createStore([
    { id: 0, name: 0 },
    { id: 1, name: 1 },
    { id: 2, name: 2 },
    { id: 3, name: 3 },
  ])

  return (
    <div style={containerStyles}>
      <Sortable idField="id" items={items} setItems={setItems} >
        {item => <div style={itemStyles}>{item.name} {Math.random()}</div>}
      </Sortable>
    </div>
  );
};