konvertieren Funktion zu verwenden css translate3d

Question

Ich habe eine Funktion in Javascript geschrieben, Bilder in einem Container ziehbar machen. Selbst wenn das Bild vergrößert ist, kann es über den gesamten Bildschirm gezogen werden, ohne dass es verschwindet. Meine Funktion beruht auf der Verwendung von style.top und style.left. Jetzt habe ich gehört, dass die Verwendung von translate3d eine bessere Leistung bietet. Das ist interessant, weil ich meine Bildskalierungsfunktion, die einen Schieberegler verwendet, auf scale3d geändert habe, und die Skalierung ist zweifellos deutlich glatter. Könnte jemand mir helfen, diese Funktion zu konvertieren, die ich geschrieben habe, um translate3d zu verwenden? Ich habe es versucht und versucht, habe aber versagt. Vielen Dank:

EDIT: Ich habe auf einen jsfiddle https://jsfiddle.net/bx4073tr/

Bitte beachten Sie, dass imgRect ist die Mutter div während img ist das Bild selbst (es ist in einem img-Tag in der div enthalten).

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

Funktioniert jetzt. Siehe makeDraggable Methode in der Geige unter:

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

Alles, was Sie tun müssen, ist diese Funktion, um die für das Bild Ereignis-Listener hinzufügen, wie: var img = document.getElementById ('myImage'); img.addEventListener ('mousedown', Funktion (Ereignis) {makeDraggable (Ereignis);});

-Code

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