x-sortable

Sortable Web Component

npm i x-sortable

pnpm add x-sortable

yarn add x-sortable

Examples

# web

Try it live

# view source

example/web.ts

import { SortableElement } from 'x-sortable'

const style = document.createElement('style')
document.head.appendChild(style)
style.textContent = /*css*/ `
x-sortable {
  display: flex;
  flex-flow: column nowrap;
}
button {
  padding: 10px;
  background: #444;
  color: #aaa;
  border: 2px solid #988;
}
`

customElements.define('x-sortable', SortableElement)

const sortable = new SortableElement()

sortable.vertical = true
// sortable.selector = 'button'

const items: any = []

for (let i = 0; i < 10; i++) {
  const btn = document.createElement('button')
  btn.textContent = '' + i
  items.push(btn)
  sortable.appendChild(btn)
}

document.body.appendChild(sortable)

sortable.onsortend = ({ detail: { oldIndex, newIndex } }) => {
  const item = items.splice(oldIndex, 1)[0]
  items.splice(newIndex, 0, item)
  for (const item of items)
    sortable.appendChild(item)
}

API

# SortableElement

src/x-sortable.ts#L16

# constructor()

# new SortableElement()

SortableElement

# $
src/work/stagas/sigl/dist/types/sigl.d.ts#L25
Context<SortableElement & JsxContext<SortableElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>

} & __module & {

# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# context

src/work/stagas/sigl/dist/types/sigl.d.ts#L26

ContextClass<SortableElement & JsxContext<SortableElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# dispatch

src/work/stagas/sigl/dist/types/events.d.ts#L4

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# dragElementImage

src/x-sortable.ts#L30

HTMLElement

# host

src/work/stagas/sigl/dist/types/sigl.d.ts#L24

SortableElement

# item

src/x-sortable.ts#L25

HTMLElement

# itemPrevDisplay

src/x-sortable.ts#L28

string

# items  =  ...

src/x-sortable.ts#L24

HTMLElement []

# onDragEnd

src/x-sortable.ts#L33

EventHandler<HTMLElement, DragEvent>

# onDragOver

src/x-sortable.ts#L34

EventHandler<SortableElement, DragEvent>

# onDragStart

src/x-sortable.ts#L32

EventHandler<HTMLElement, DragEvent>

# onmounted

EventHandler<SortableElement, CustomEvent<any>>

# onsortend

EventHandler<SortableElement, CustomEvent<{

# newIndex

src/x-sortable.ts#L7

number

# oldIndex

src/x-sortable.ts#L7

number

}>>

# onsortstart

EventHandler<SortableElement, CustomEvent<{

# currentIndex

src/x-sortable.ts#L6

number

}>>

# onunmounted

EventHandler<SortableElement, CustomEvent<any>>

# placeholder

src/x-sortable.ts#L22

HTMLElement

# root  =  ...

src/x-sortable.ts#L17

ShadowRoot

# state  =  ...

src/x-sortable.ts#L19

State<SortableElement, {

# Idle  =  'idle'

"idle"

# Sort  =  'sort'

"sort"

}, "idle" | "sort"> & EventMethods<SortableElement, {
# idlecancel

CustomEvent<any>

# idleend

CustomEvent<any>

# idlepause

CustomEvent<any>

# idleresume

CustomEvent<any>

# idlestart

CustomEvent<any>

# sortcancel

CustomEvent<any>

# sortend

CustomEvent<any>

# sortpause

CustomEvent<any>

# sortresume

CustomEvent<any>

# sortstart

CustomEvent<any>

}> & InlineEventMap<SortableElement, {
# idlecancel

CustomEvent<any>

# idleend

CustomEvent<any>

# idlepause

CustomEvent<any>

# idleresume

CustomEvent<any>

# idlestart

CustomEvent<any>

# sortcancel

CustomEvent<any>

# sortend

CustomEvent<any>

# sortpause

CustomEvent<any>

# sortresume

CustomEvent<any>

# sortstart

CustomEvent<any>

}>

# vertical  =  false

src/x-sortable.ts#L20

boolean

# created(ctx)

# ctx
Context<SortableElement & JsxContext<SortableElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/x-sortable.ts#L36

# $
Context<SortableElement & JsxContext<SortableElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/work/stagas/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/work/stagas/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/work/stagas/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SortableElement, LifecycleEvents & SortableEvents [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SortableElement, keyof SortableElement>

# SortableEvents

src/x-sortable.ts#L5

{

# sortend
src/x-sortable.ts#L7
CustomEvent<{

# newIndex

src/x-sortable.ts#L7

number

# oldIndex

src/x-sortable.ts#L7

number

}>

# sortstart

src/x-sortable.ts#L6

CustomEvent<{

# currentIndex

src/x-sortable.ts#L6

number

}>

}

# SortableState  =  ...

src/x-sortable.ts#L10

{

# Idle  =  'idle'

"idle"

# Sort  =  'sort'

"sort"

}

Credits

• sigl by stagas – Web framework

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas