How to rotate a div on mouse drag (how to change transform) using jquery?

Question

css

The #wrapper {transform-style: preserve-3d} has 6 .sides that are positioned in the cube. There is a script that rotates the #wrapper along the x and y axes so that the cube rotates around its center point.

$(function () {
            $(document).mousemove(function (e) {
                $('#wrapper').css({
                    'transform': 'rotateX(' + e.pageY + 'deg) rotateY(' + e.pageX + 'deg)'
                });
            });
        });

How can I change this script to rotate #wrapper on mouse click and drag. The cube should stand still and spin like it spins with mousemove, only when clicked, held and dragged with the mouse. When the cursor is released, the cube remains in its current position.
Here are the html\css codes

<div id="wrapper">
        <div class="back side"></div>
        <div class="left side"></div>
        <div class="right side"></div>
        <div class="top side"></div>
        <div class="bottom side"></div>
        <div class="front side"></div>
    </div>

body {
    background: #eee;
    margin: 0;
    padding: 0;
    perspective: 900px;
    perspective-origin: center -40px;
    font-family: 'PT Sans', tahoma;
}

#wrapper {
    transform-style: preserve-3d;
    position: relative;
    width: 250px;
    height: 250px;
    margin: 200px auto;
    /*border: 1px solid black;*/
}

.side { 
    position: absolute;
    top: 25px;
    left: 25px;
    opacity: .7;
    border: 3px solid white;
    width: 200px;
    height: 200px; 
}

.back { transform: translateZ(-100px);}
.front { transform: translateZ(100px);}
.bottom { transform: translateY(100px) rotateX(90deg);}
.top { transform: translateY(-100px) rotateX(90deg);}
.left { transform: translateX(100px) rotateY(90deg);}
.right { transform: translateX(-100px) rotateY(90deg);}

Answer 1

Take any plugin that is convenient for you to implement drag and drop, google jquery drag (in the results of the issue there will be a solution without jquery UI and without a separate plugin at all, only the jquery library), as a rule, they all hang a custom class at the time of mouse capture. You can add rotation to this class.