PyUIBuilder/src/components/utils/draggable.js

import React from "react"
import {useDraggable} from "@dnd-kit/core"
import { CSS } from "@dnd-kit/utilities"

function Draggable(props) {
    const {attributes, listeners, setNodeRef, transform} = useDraggable({
      id: props.id,
      data: {title: props.children}
    })
    const style = transform ? {
      transform: CSS.Translate.toString(transform),
    } : undefined
  
    
    return (
      <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} 
              ref={setNodeRef} 
              style={style} 
              {...listeners} 
              {...attributes}>
        {props.children}
      </button>
    )
}


export default Draggable