Drag & Drop

[Farnsi]

Tried to replace the jQuery Drag & Drop with a vanilla version, but the mousedown event of parent .ts-control prevent the drag event-handler.

With SortableJS it would work perfect, but the mousedown event prevent it.

Any idea how to get around this?

[Farnsi]

Here is my hacky solution

dnd.plugin.js

import Sortable from 'sortablejs'

export default function DragAndDropPlugin() {
  if (this.settings.mode !== 'multi') {
    return
  }

  // stop propagation of re-rendered items
  this.hook('after', 'render', () => {
    if (this.control) {
      const items = this.control.querySelectorAll('[data-value]')

      items.forEach((item) => {
        item.addEventListener('mousedown', (e) => {
          e.stopPropagation()
        })
      })
    }
  })

  this.on('initialize', () => {
    new Sortable(this.control, {
      draggable: '[data-value]',
      filter: 'input',
      // animation: 150,
      // direction: 'horizontal', // to restrict to horizontal movement
      onEnd: () => {
        const values = this.control.querySelectorAll('[data-value]').map(
          (item) => item.dataset.value,
        )
        this.setValue(values)
      },
    })
  })
}

Select.jsx

import TomSelect from 'tom-select'
import { onMount, splitProps } from 'solid-js'

import { DragAndDropPlugin } from './dnd.plugin.js'

TomSelect.define('drag_drop', DragAndDropPlugin)

const Select = (props) => {
  let [local, rest] = splitProps(props, [
    // remove from rest (select onChange will not fired, instead it instance values)
    'onChange',
  ])

  let select

  onMount(() => {
    const instance = new TomSelect(select, {
      plugins:['drag_drop']
    })

    instance.on('change', local.onChange)
  })

  return (
    <select ref={select} onChange={(e) => e.preventDefault()} {...rest} />
  )
}

export default Select

[Farnsi]

You can implement some simple D&D with vanilla dom drag-Events, without sortablejs, but this feels like re-inventing the wheel.
sortablejs has nice animation and movement response included.