Add an example using drag and drop functionnality

example/src/demos/CountrySelectorDnD.jsx

@@ -0,0 +1,186 @@
+import React, { useCallback, useState } from 'react'
+import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { ReactTags } from '../../../src'
+import { suggestions } from '../countries'
+import { closestCenter, DndContext } from '@dnd-kit/core'
+
+const tagToKey = (tag) => {
+  return `${String(tag.value)}-${tag.label}`
+}
+
+const Handle = (props) => {
+  const { isDragging, ...remainingProps } = props
+
+  return (
+    <span
+      className="react-tags__handleTag"
+      style={{ cursor: `${isDragging ? 'grabbing' : 'grab'}` }}
+      {...remainingProps}
+    >
+      <svg viewBox="0 0 20 20" width="12" fill="currentColor">
+        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+      </svg>
+    </span>
+  )
+}
+
+export function CountrySelectorDnD() {
+  const [selected, setSelected] = useState([suggestions[10], suggestions[121]])
+
+  const [options, setOptions] = useState({
+    activateFirstOption: false,
+    allowBackspace: false,
+    collapseOnSelect: false,
+    isDisabled: false,
+    isInvalid: false,
+  })
+
+  const onAdd = useCallback(
+    (newTag) => {
+      setSelected([...selected, newTag])
+    },
+    [selected]
+  )
+
+  const onDelete = useCallback(
+    (index) => {
+      setSelected(selected.filter((_, i) => i !== index))
+    },
+    [selected]
+  )
+
+  const onOptionChange = useCallback(
+    (e) => {
+      setOptions({ ...options, [e.target.name]: e.target.checked })
+    },
+    [options]
+  )
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event
+
+    if (active.id !== over.id) {
+      setSelected((selected) => {
+        const oldIndex = selected.findIndex((s) => tagToKey(s) === active.id)
+        const newIndex = selected.findIndex((s) => tagToKey(s) === over.id)
+        return arrayMove(selected, oldIndex, newIndex)
+      })
+    }
+  }
+
+  const CustomTagList = ({ children, classNames, ...tagListprops }) => {
+    return (
+      <SortableContext items={React.Children.map(children, (child) => child.key)}>
+        <ul className={classNames.tagList} {...tagListprops}>
+          {React.Children.map(children, (child) => (
+            <li className={classNames.tagListItem} key={child.key}>
+              {child}
+            </li>
+          ))}
+        </ul>
+      </SortableContext>
+    )
+  }
+
+  const CustomTag = ({ classNames, tag, ...tagProps }) => {
+    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+      id: tagToKey(tag),
+    })
+
+    const style = {
+      transform: CSS.Transform.toString(transform),
+      transition,
+    }
+
+    return (
+      <div style={{ display: 'inline-block', ...style }} className="react-tags__dndtag">
+        <span
+          ref={setNodeRef}
+          style={{ display: 'inline-block' }}
+          className={classNames.tagName}
+          {...attributes}
+        >
+          <Handle isDragging={isDragging} {...listeners} />
+          {tag.label}
+        </span>
+        <span
+          className="react-tags__removeTag"
+          {...tagProps}
+          onClick={() => onDelete(selected.findIndex((s) => tagToKey(s) === tagToKey(tag)))}
+        ></span>
+      </div>
+    )
+  }
+
+  return (
+    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <p>Select the countries you have visited below:</p>
+      <ReactTags
+        id="country-selector"
+        labelText="Select countries"
+        onAdd={onAdd}
+        onDelete={onDelete}
+        selected={selected}
+        suggestions={suggestions}
+        renderTagList={CustomTagList}
+        renderTag={CustomTag}
+        {...options}
+      />
+      <fieldset>
+        <legend>Options</legend>
+        <label>
+          <input
+            type="checkbox"
+            name="isDisabled"
+            checked={options.isDisabled}
+            onChange={onOptionChange}
+          />
+          Disable component
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            name="isInvalid"
+            checked={options.isInvalid}
+            onChange={onOptionChange}
+          />
+          Mark as invalid
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            name="allowBackspace"
+            checked={options.allowBackspace}
+            onChange={onOptionChange}
+          />
+          Allow backspace key to delete selected tags
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            name="collapseOnSelect"
+            checked={options.collapseOnSelect}
+            onChange={onOptionChange}
+          />
+          Automatically collapse the listbox on select
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            name="activateFirstOption"
+            checked={options.activateFirstOption}
+            onChange={onOptionChange}
+          />
+          Automatically activate the first option when listbox expands
+        </label>
+      </fieldset>
+      <details>
+        <summary>View output</summary>
+        <pre>
+          <code>{JSON.stringify(selected, null, 2)}</code>
+        </pre>
+      </details>
+    </DndContext>
+  )
+}

example/src/index.html

@@ -156,6 +156,11 @@ <h3>Custom tag list component</h3>
       <div id="demo-6"></div>
     </section>
     <hr />
+    <section>
+      <h3>Draggable tags</h3>
+      <div id="demo-7"></div>
+    </section>
+    <hr />
     <section>
       <h2>Documentation</h2>
       <p>

example/src/main.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { CountrySelector } from './demos/CountrySelector'
+import { CountrySelectorDnD } from './demos/CountrySelectorDnD'
 import { CustomTags } from './demos/CustomTags'
 import { CustomValidity } from './demos/CustomValidity'
 import { AsyncSuggestions } from './demos/AsyncSuggestions'
@@ -27,4 +28,7 @@ window.onload = () => {
 
   const container6 = ReactDOM.createRoot(document.getElementById('demo-6'))
   container6.render(<CustomTagList />)
+
+  const container7 = ReactDOM.createRoot(document.getElementById('demo-7'))
+  container7.render(<CountrySelectorDnD />)
 }

example/src/styles.css

@@ -195,3 +195,63 @@
   line-height: 1.5rem;
   color: #00000080;
 }
+
+.react-tags__dndtag {
+  margin: 0 0.25rem 0.25rem 0;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: 3px;
+  background: #eaeef2;
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.react-tags__dndtag:hover {
+  color: #ffffff;
+  background-color: #4f46e5;
+}
+
+.react-tags__removeTag {
+  cursor: pointer;
+}
+
+.react-tags__handleTag {
+  margin-right: .25rem;
+  padding: .25rem 0.4rem;
+  border-radius: 5px;
+}
+
+.react-tags__handleTag:hover {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, .1);
+}
+
+
+.react-tags__removeTag::after {
+  content: '';
+  display: inline-block;
+  width: 0.65rem;
+  height: 0.65rem;
+  clip-path: polygon(
+    10% 0,
+    0 10%,
+    40% 50%,
+    0 90%,
+    10% 100%,
+    50% 60%,
+    90% 100%,
+    100% 90%,
+    60% 50%,
+    100% 10%,
+    90% 0,
+    50% 40%
+  );
+  margin-left: 0.5rem;
+  font-size: 0.875rem;
+  background-color: #7c7d86;
+}
+
+.react-tags__removeTag:hover::after {
+  background-color: #ffffff;
+}

package.json

@@ -37,6 +37,9 @@
   },
   "homepage": "https://github.com/i-like-robots/react-tag-autocomplete",
   "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.0",