sveltedragdrop

1.0.3 • Public • Published

Svelte Drag Drop

An easy-to-use drag and drop Svelte component

Demo

A demo of this component can be seen here

Installation

Install sveltedragdrop with npm

  npm i sveltedragdrop

Required attributes

  • list (List of things)
  • on:reSort (Resort logic)
  • let:item

Styling attributes (optional)

You can easily style the component as you want by passing styling classes as string into attributes below. ( The classes can be from any framework or library or even your own global styles as long as the component can access them. )

  • ulStyle
  • liStyle

Usage/Examples

<!--app.html-->
...
<style>
    .big-black-text{
      font-weight: 900;
	    color: red;
	    font-size: 3em;
    }
</style>
<script>
    import DragDrop from "sveltedragdrop"
    let people = [
        { name: "Robert Downey" },
        { name: "Chris Evans" },
        { name: "Chris Hemsworth" },
        { name: "Chadwick Boseman" },
        { name: "Chris Pratt" }
    ]
    function reSortHandler(e) {
        let newList = e.detail
        people = newList
    }
</script>

<div>
    <DragDrop
    let:item
    list={people}
    on:reSort={reSortHandler}
    ulStyle="flex"
    liStyle="big-black-text"
    >
    <h2>{item.name}</h2>
    </DragDrop>
</div>

Authors

Package Sidebar

Install

npm i sveltedragdrop

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

4.79 kB

Total Files

4

Last publish

Collaborators

  • canadies