images - drag image

                <div>
                    <div id="draggable" class="dragme">"Hello World!"</div>
                    <img src="../images/1.jpg" alt="drag-and-drop image script" 
                    title="drag-and-drop image script" class="dragme">
                </div>
                <style>
                    .dragme{position:relative;  width: 20vw; height: 16vw; cursor: move;}
                    #draggable {background-color: #ccc; border: 0.1vw solid #000;}
                </style>
                <script>
                    function startDrag(e) {
                        // determine event object
                        if (!e) {
                            var e = window.event;
                        }
                        if(e.preventDefault) e.preventDefault();
                        // IE uses srcElement, others use target
                        var targ = e.target ? e.target : e.srcElement;
    
                        if (targ.className != 'dragme') {return};
                        // calculate event X, Y coordinates
                            offsetX = e.clientX;
                            offsetY = e.clientY;
    
                        // assign default values for top and left properties
                        if(!targ.style.left) { targ.style.left='0px'};
                        if (!targ.style.top) { targ.style.top='0px'};
    
                        // calculate integer values for top and left properties
                        coordX = parseInt(targ.style.left);
                        coordY = parseInt(targ.style.top);
                        drag = true;
    
                        // move div element
                            document.onmousemove=dragDiv;
                        return false;
                        
                    }
                    function dragDiv(e) {
                        if (!drag) {return};
                        if (!e) { var e= window.event};
                        var targ=e.target?e.target:e.srcElement;
                        // move div element
                        targ.style.left=coordX+e.clientX-offsetX+'px';
                        targ.style.top=coordY+e.clientY-offsetY+'px';
                        return false;
                    }
                    function stopDrag() {
                        drag=false;
                    }
                    window.onload = function() {
                        document.onmousedown = startDrag;
                        document.onmouseup = stopDrag;
                    }
                </script>
            

                <div> 
                    <div class="frame">
                            <img id="dragMe_1" class="draggable" src="../images/6.jpg" alt="sailing" width="400px" height="auto">
                    </div>
                    <script>
                        let x = 0, y = 0;
                        const ele = document.getElementById('dragMe_1');
                        const mouseDownHandler = function (e) {
                            x = e.clientX;
                            y = e.clientY;
                            document.addEventListener('mousemove', mouseMoveHandler);
                            document.addEventListener('mouseup', mouseUpHandler);
                        };
                        const mouseMoveHandler = function (e) {
                            const dx = e.clientX - x;
                            const dy = e.clientY - y;
        
                            ele.style.top = `${ele.offsetTop + dy}px`;
                            ele.style.left = `${ele.offsetLeft + dx}px`;
        
                            x = e.clientX;
                            y = e.clientY;
                        };
        
                        const mouseUpHandler = function () {
                            document.removeEventListener('mousemove', mouseMoveHandler);
                            document.removeEventListener('mouseup', mouseUpHandler);
                        };
                        ele.addEventListener('mousedown', mouseDownHandler);
                    </script>
                </div>  
            

                <div>
                    <img class="draggable" id="dragMe_2"src="../images/4.jpg" alt="">
                    <style>
                    .container {align-items: center; display: flex; justify-content: center; min-height: 32vw;}
                    </style>
                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            let x = 0; let y = 0;
                            const ele = document.getElementById('dragMe_2');
                            const mouseDownHandler = function (e) {
                                x = e.clientX;
                                y = e.clientY;
        
                                document.addEventListener('mousemove', mouseMoveHandler);
                                document.addEventListener('mouseup', mouseUpHandler);
                            };
        
                            const mouseMoveHandler = function (e) {
                                const dx = e.clientX - x;
                                const dy = e.clientY - y;
        
                                ele.style.top = (ele.offsetTop + dy) + 'px';
                                ele.style.left = (ele.offsetLeft + dx) + 'px';
        
                                x = e.clientX;
                                y = e.clientY;
                            };
        
                            const mouseUpHandler = function () {
                                document.removeEventListener('mousemove', mouseMoveHandler);
                                document.removeEventListener('mouseup', mouseUpHandler);
                            };
        
                            ele.addEventListener('mousedown', mouseDownHandler);
                        });
                    </script>
                </div>
            

                <div class="frame">
                    <div id="zoom_3">
                        <img src="../images/17.jpg" alt="zoom">
                    </div>
                </div>
                <style>
                    .frame{ width: 30vw; height: 30vw; overflow: auto; border: 0.2vw solid green;margin-left:10vw;}
                    #zoom_3 {width: 100%; height: 100%; transform-origin: 0px 0px;  transform: scale(1) translate(0px, 0px); cursor: grab;}
                    div#zoom_3 > img {width: 100%; height: 100%; }
                </style>
                <script>
                    var scale = 1, panning = false, pointX = 0, pointY = 0, start = { x: 0, y: 0 }, zoom = document.getElementById("zoom_3");
                    function setTransform() {
                        zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
                    }
                    zoom.onmousedown = function (e) {
                        e.preventDefault();
                        start = { x: e.clientX - pointX, y: e.clientY - pointY };
                        panning = true;
                    }
                    zoom.onmouseup = function (e) {
                        e.preventDefault();
                        panning = false;
                    }
                    zoom.onmousemove = function (e) {
                        e.preventDefault();
                        if (!panning) {
                        return;
                        }
                        pointX = (e.clientX - start.x);
                        pointY = (e.clientY - start.y);
                        setTransform();
                    }
                    zoom.onwheel = function (e) {
                        e.preventDefault();
                        var xs = (e.clientX - pointX) / scale, ys = (e.clientY - pointY) / scale, delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
                        (delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
                        pointX = e.clientX - xs * scale;
                        pointY = e.clientY - ys * scale;
                        setTransform();
                    }
                </script>