Javascript 转换函数以使用css translate3d

我已经用Javascript编写了一个函数，可以在容器中拖动图像。即使图像被放大，也可以在屏幕上拖动，而不会消失。我的功能依赖于使用style.top和style.left。现在我听说使用translate3d可能会提供更好的性能。这很有趣，因为我将使用滑块的图像缩放函数改为缩放3D，毫无疑问，缩放更平滑。有人能帮我把我写的这个函数转换成translate3d吗？我试了又试，但一直失败。非常感谢：

编辑：我建立了一个JSFIDLE

请注意，imgRect是父div，而img是图像本身（它位于div中包含的img标记中）

函数makeImageDragable（事件）{
//使图像可拖动但在容器范围内
设溢出_垂直=假；
让溢出_水平=false；
//用于容纳图像和图像容器的边界矩形
设imgRect=img.getBoundingClientRect（）；
让imgContainerRect=imageContainer.getBoundingClientRect（）；
//找出图像是否溢出其容器div
//检查垂直溢出，getBoundingClientRect（）。缩放图像后，高度将获得真实高度
如果（imgRect.height>imageContainer.offsetHeight）{
溢出垂直=真；
}
//检查水平溢流
if（imgRect.width>imageContainer.offsetWidth）{
溢出水平=真；
}
//如果没有溢出，无论是水平还是垂直，则绝对不要执行任何操作
如果（！overflow_horizontal&&！overflow_vertical）{
//无事可做
}否则{
//否则，使图像可拖动
event=event | | window.event；
//获取鼠标的初始位置
让startX=event.clientX；
让startY=event.clientY；
//获取要拖动的图像的位置
let offsetX=像素浮动（img.style.left）；
let offsetY=pixeltoflot（img.style.top）；
//添加onmousemove事件现在我们确定用户已启动mousedown事件
window.onmousemove=函数（mousemove\u事件）{
if（mousemove_事件==null）{
mousemove\u event=window.event；
}
//计算边界，使图像不会离开页面
//如果出现溢出，图像将比容器大
//所以我们需要找到我们可以向上、向下和侧向移动的最大距离
//使用img.getBoundingClientRect，我们可以得到缩放图像的宽度，也可以得到容器的宽度
//将它除以2，这样我们可以在任意方向上移动相同数量的像素
//最大左右
设max_right=-1*（（imgRect.right-imgRect.left）-（imgContainerRect.right-imgContainerRect.left））/2）；
//应该是正数
设max_left=-1*（max_right）；
//最大底部和顶部
设max_bottom=-1*（（imgRect.bottom-imgRect.top）-（imgContainerRect.bottom-imgContainerRect.top））/2）；
//应该是正数
设max_top=-1*（max_bottom）；
//左右拖动图像
如果（！溢出_水平）{
}否则{
设scrollX=（offsetX+mousemove_event.clientX-startX）；
//img.style.left将不断增加或减少，请检查它是否接近max\u left或max\u right
如果（scrollX>=max_left | | scrollX max_right）{img.style.left=max（scrollX，max_right）+'px'}
}
}
//从上到下拖动图像
如果（！溢出_垂直）{
}否则{
让scrollY=（offsetY+mousemove_event.clientY-startY）；
//当展开的图像向下拉时，img.style.top会不断增加以接近max\u top
//如果达到最大上限，就什么也不做，否则继续增加
//检查两种情况，接近最大值顶部和接近最大值底部
如果（scrollY>=max_top | | scrollY max_bottom）{img.style.top=max（scrollY，max_bottom）+'px'}
}
}
//返回
返回false；
} 
}
//在mouseup上取消mousemove事件
window.onmouseup=函数（mouseup\u事件）{
window.onmousemove=null；
//不应返回false，因为它会干扰范围滑块
}
//返回错误
返回false；
}

现在可以工作了。 请参见下文中的makeDraggable方法：

您只需将此函数添加到图像的事件侦听器中，如下所示： var img=document.getElementById（'myImage'）； addEventListener（'mousedown'，函数（事件）{makeDraggable（事件）；}）

代码

---

我尝试将img.style.top和img.style.left的所有实例替换为img.style.transform='translate3d（scrollXpx，scrollYpx，0）scale（currentScale）'，图像到处跳跃

function makeImageDraggable(event) {
    // Make an image draggable but within bounds of container
    let overflow_vertical = false;
    let overflow_horizontal = false;
    // bounding rectangles to hold image and imageContainer
    let imgRect = img.getBoundingClientRect();
    let imgContainerRect = imageContainer.getBoundingClientRect();
    // find out if image overflows it's container div
    // check for vertical overflow, getBoundingClientRect().height will get the real height after the image is scaled
    if ( imgRect.height > imageContainer.offsetHeight ) {
        overflow_vertical = true;
    }
    // check for horizontal overflow
    if ( imgRect.width > imageContainer.offsetWidth ) {
        overflow_horizontal = true;
    }
    // if there is no overflow, either horizontal or vertical, then do absolutely nothing
    if (!overflow_horizontal && !overflow_vertical) {
        // nothing to do
    } else {
        // otherwise make image draggable
        event = event || window.event;
        // get initial mouse position
        let startX = event.clientX;
        let startY = event.clientY;

        // get position of image to be dragged
        let offsetX = pixelToFloat(img.style.left);
        let offsetY = pixelToFloat(img.style.top);

        // add onmousemove event now we are sure user has initiated a mousedown event
        window.onmousemove = function(mousemove_event) {
            if (mousemove_event == null) {
                mousemove_event = window.event;
            }
            // calculate bounds so that image does not go off the page
            // if there is an overflow, the image will be bigger than the container
            // so we need to find the maximum distance we can go upwards, downwards and sideways
            // using img.getBoundingClientRect, we can get the width of the scaled image, we also get the width of the container
            // divide it by 2 so we can move the same number of pixels in either direction
            // max right and left
            let max_right = -1 * ( ((imgRect.right - imgRect.left) - (imgContainerRect.right - imgContainerRect.left))/2 );
            // should be a positive number
            let max_left = -1 * (max_right);
            // max bottom and top
            let max_bottom = -1 * ( ((imgRect.bottom - imgRect.top) - (imgContainerRect.bottom - imgContainerRect.top))/2 );
            // should be a positive number
            let max_top = -1 * (max_bottom);
            // Dragging image left and right 
            if (!overflow_horizontal) {
            } else {
                let scrollX = (offsetX + mousemove_event.clientX - startX);
                // img.style.left will keep increasing or decreasing, check if it approaches max_left or max_right
                if (scrollX >= max_left || scrollX <= max_right) {
                    //return false;imageContainer.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
                } else {
                    if (scrollX < max_left) { img.style.left = min(scrollX, max_left) + 'px'; }
                    if (scrollX > max_right) { img.style.left = max(scrollX, max_right) + 'px'; }
                }
            }
            // Dragging image top to bottom
            if (!overflow_vertical) {
            } else {
                let scrollY = (offsetY + mousemove_event.clientY - startY);
                // as an expanded image is pulled downwards, img.style.top keeps increasing to approach max_top
                // if it reaches max top, simply do nothing, else keep increasing
                // check for both conditions, approaching max_top and approaching max_bottom
                if (scrollY >= max_top || scrollY <= max_bottom) {
                   // return false;
                } else {
                    if (scrollY < max_top) { img.style.top = min(scrollY, max_top) + 'px'; }
                    if (scrollY > max_bottom) { img.style.top = max(scrollY, max_bottom) + 'px'; }
                }
            }
            // return
            return false;
        } 
    }

    // cancel mousemove event on mouseup
    window.onmouseup = function(mouseup_event) {
        window.onmousemove = null;
        // Should not return false as it will interfere with range slider
    }
    // return false
    return false;
}

function makeDraggable(event) {
    // get bounding rectangle
    let imgRect = img.getBoundingClientRect();
    let parentRect = parent.getBoundingClientRect();
    // check overflow
    let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false);
    let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false);
    // get start position
    let startX = event.pageX - translateX, startY = event.pageY - translateY;
    let max_left = parentRect.left - imgRect.left;
    let max_top = parentRect.top - imgRect.top;
    window.onmousemove = function(evt) {
        // set event object
        if (evt == null) { evt = window.event; }
        // Say max_left is 160px, this means we can only translate from 160px to -160px to keep the image visible
        // so we check if the image moves beyond abs(160), if it does, set it to 160 or -160 depending on direction, else, let it continue
        translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX));
        translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY));
        // check if scaled image width is greater than it's container. if it isn't set translateX to zero and so on
        translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0;
        // translate parent div
        parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)';
        // return
        return false;
   }
    window.onmouseup = function(evt) {
        // set mousemove event to null
        window.onmousemove = null;
    }
    return false;
 };