convert function to use css translate3d

Question

我在Javascript中編寫了一個函數來使圖像在容器中可拖動。即使圖像被放大，也可以在整個屏幕上拖動而不會從圖像中消失。我的功能依賴於使用style.top和style.left。現在我聽說使用translate3d可能會提供更好的性能。這很有趣，因爲我將使用滑塊的圖像縮放功能更改爲scale3d，縮放顯然更加平滑。那麼任何人都可以幫我轉換我寫的使用translate3d的這個函數嗎？我嘗試過並嘗試過，但一直在失敗。非常感謝：

編輯：我提出了一個的jsfiddle https://jsfiddle.net/bx4073tr/

請注意，imgRect是父DIV而IMG是圖像本身（這是在包含在div img標籤）。

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; 
} 

Answer 1

現在就開始工作。 在下面的小提琴見makeDraggable方法：

https://jsfiddle.net/daibatzu/0u74faz6/6/

所有你需要做的就是這個功能添加到事件偵聽器，如圖像： VAR IMG =的document.getElementById（「MYIMAGE」）; img.addEventListener（'mousedown'，function（event）{makeDraggable（event）;}）;

代碼

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; 
};