function dragHandle(handle) {
    handle.setAttribute("role", "button");

    function startDrag(e) {
        // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
        e.preventDefault();
        isItemsDragDisabled.set(false);

        // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag
        window.addEventListener("mouseup", resetStartDrag);
        window.addEventListener("touchend", resetStartDrag);
    }

    function handleKeyDown(e) {
        if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
    }

    function resetStartDrag() {
        isItemsDragDisabled.set(true);
        window.removeEventListener("mouseup", resetStartDrag);
        window.removeEventListener("touchend", resetStartDrag);
    }

    isItemsDragDisabled.subscribe(disabled => {
        handle.tabIndex = disabled ? 0 : -1;
        handle.style.cursor = disabled ? "grab" : "grabbing";
    });

    handle.addEventListener("mousedown", startDrag);
    handle.addEventListener("touchstart", startDrag);
    handle.addEventListener("keydown", handleKeyDown);
    return {
        update: () => {},
        destroy: () => {
            handle.removeEventListener("mousedown", startDrag);
            handle.removeEventListener("touchstart", startDrag);
            handle.removeEventListener("keydown", handleKeyDown);
        }
    };
}
This should be used to mark drag handles inside items that belong to a 'dragHandleZone' (see above)
@param {HTMLElement} handle
@return {{update: *, destroy: *}}