Move Elements

<!-- button: move left -->
<button id="btn-moveLeft" class="btn btn-primary" onclick="movePanel1.translate('panel1', 'left', '150px')">
    <i class="fa-solid fa-left-long"></i>
</button>


<!-- panel(s) container -->
<div class="overflow-hidden">

    <!-- target panel -->
    <div id="panel1" class="transition-all duration-1000">

        <!-- panel contents -->
        <div class="my-6 p-3">
            <p class="text-xl">Panel 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        </div>
        <!-- end panel contents -->

    </div>
    <!-- end target panel -->

</div>
<!-- end panel(s) container -->

class Translate
{
    /**
     * Create a new instance with or without constructor arguments.
     * To use this class generically, e.g. on click of one or more buttons, do not pass in any arguments. Then assign
     * behavior by calling translate() with arguments.
     * Or hardcode an instance to only work a certain way by using arguments, e.g ('elID', 'right', '20px')
     * will create an instance of this class that only moves the element with id 'elID' 20px to the right.
     * Then call translate with no arguments to perform that operation.
     *
     * @param {string} [elID] [opt] The id of the element to move. Default null.
     * @param {string} [direction] [opt] The direction to move the element. Default null.
     * @param {string} [value] [opt] Used with el.style.transform. Default null.
     */
    constructor(elID = null, direction = null, value = null)
    {
        if (elID != null) { this.elToMove = document.getElementById(elID); }
        else this.elToMove = elID;

        if (this.isValidDirection(direction)) { this.direction = direction; }
        else { this.direction = null; }

        if (value != null) { this.spot = value; }
    }


    /**
     * Determines if a requested direction is permissible
     *
     * @param direction
     * @return {boolean}
     */
    isValidDirection(direction)
    {
        let isValid = false;
        const validDirections = ['left', 'right', 'origin', 'up', 'down', 'fromOrigin', null]
        for (const validDirection of validDirections)
        {
            if (direction === validDirection) { isValid = true; }
        }
        return isValid;
    }


    /**
     * Translate the element along an axis
     *
     * @param {string} [elID] opt: Which element to swipe. Default null.
     * @param {string} [direction] opt: 'left', 'right', 'origin', 'up', 'down', 'fromOrigin', or null. Default null.
     * @param {string} [value] opt: The value for translateX() or translateY(). Default null.
     *
     */
    translate(elID = null, direction = null, value = null)
    {
        // get or determine element to translate along its X axis
        const el = (elID != null) ? document.getElementById(elID) : this.elToMove;

        // get or determine direction to translate along its X axis
        let dirTo;
        if (direction != null && this.isValidDirection(direction)) { dirTo = direction }
        else { dirTo = this.direction }

        // get or determine value to translate
        const spot = (value != null) ? value : this.spot;

        switch (dirTo)
        {
            case 'left':
                this.moveLeft(el, spot);
                break;

            case 'right':
                this.moveRight(el, spot);
                break;

            case 'origin':
                this.moveToOrigin(el);
                break;

            case 'up':
                this.moveUp(el, spot);
                break;

            case 'down':
                this.moveDown(el, spot);
                break;

            case 'fromOrigin':
                this.moveFromOrigin(el, spot);
                break;

            default:
                break;
        }
    }


    moveLeft(el, x) { el.style.transform = `translateX(-${x})`; }

    moveRight(el, x) { el.style.transform = `translateX(${x})`; }

    moveToOrigin(el) { el.style.transform = 'translate(0%)'; }

    moveUp(el, y) { el.style.transform = `translateY(-${y})`; }

    moveDown(el, y) { el.style.transform = `translateY(${y})`; }

    moveFromOrigin(el, spot) { el.style.transform = `translate(${spot})`; }


    /**
     * Get an element's bounding box
     *
     * @param {HTMLElement} el The element to get the DOMRect of
     * @return {DOMRect}
     */
    getBounds(el) { return el.getBoundingClientRect(); }

}

<script src="/path/to/Translate.js"></script>
<script>
    const movePanel1 = new Translate();
</script>

<!-- button: move up -->
<button id="btn-moveUp" class="btn btn-primary" onclick="movePanel1.translate('panel1', 'up', '150px')">
    <i class="fa-solid fa-up-long"></i>
</button>

<!-- button: return to original position -->
<button id="btn-moveToOrigin" class="btn btn-primary" onclick="movePanel1.translate('panel1', 'origin')">
    <i class="fa-solid fa-rotate-left"></i>
</button>

<!-- button: move down -->
<button id="btn-moveDown" class="btn btn-primary" onclick="movePanel1.translate('panel1', 'down', '150px')">
    <i class="fa-solid fa-down-long"></i>
</button>

<!-- button: move right -->
<button id="btn-moveRight" class="btn btn-primary" onclick="movePanel1.translate('panel1', 'right', '150px')">
    <i class="fa-solid fa-right-long"></i>
</button>

<!-- button: move from origin 30px right and down -->
<button id="btn-moveFromOrigin" class="btn btn-primary" onclick="movePanel1.translate('panel1', 'fromOrigin', '30px, 30px')">
    <i class="fa-solid fa-crosshairs"></i>
</button>

<!-- button: alternative move right -->
<button id="btn-altMoveRight" class="btn btn-primary" onclick="altMovePanel1.translate()">
    <i class="fa-solid fa-right-long"></i>
</button>


<script>
    const altMovePanel1 = new Translate('panel1', 'right', '150px');
</script>