src/plain-draggable.js
function initTranslate(props) {
  const element = props.element,
    elementStyle = props.elementStyle,
    curPosition = getBBox(element), // Get BBox before change style.
    RESTORE_PROPS = ['display', 'marginTop', 'marginBottom', 'width', 'height'];
  RESTORE_PROPS.unshift(cssPropTransform);

  // Reset `transition-property` every time because it might be changed frequently.
  const orgTransitionProperty = elementStyle[cssPropTransitionProperty];
  elementStyle[cssPropTransitionProperty] = 'none'; // Disable animation
  const fixPosition = getBBox(element);

  if (!props.orgStyle) {
    props.orgStyle = RESTORE_PROPS.reduce((orgStyle, prop) => {
      orgStyle[prop] = elementStyle[prop] || '';
      return orgStyle;
    }, {});
    props.lastStyle = {};
  } else {
    RESTORE_PROPS.forEach(prop => {
      // Skip this if it seems user changed it. (it can't check perfectly.)
      if (props.lastStyle[prop] == null || elementStyle[prop] === props.lastStyle[prop]) {
        elementStyle[prop] = props.orgStyle[prop];
      }
    });
  }

  const orgSize = getBBox(element),
    cmpStyle = window.getComputedStyle(element, '');
  // https://www.w3.org/TR/css-transforms-1/#transformable-element
  if (cmpStyle.display === 'inline') {
    elementStyle.display = 'inline-block';
    ['Top', 'Bottom'].forEach(dirProp => {
      const padding = parseFloat(cmpStyle[`padding${dirProp}`]);
      // paddingTop/Bottom make padding but don't make space -> negative margin in inline-block
      // marginTop/Bottom don't work in inline element -> `0` in inline-block
      elementStyle[`margin${dirProp}`] = padding ? `-${padding}px` : '0';
    });
  }
  elementStyle[cssPropTransform] = 'translate(0, 0)';
  // Get document offset.
  let newBBox = getBBox(element);
  const offset = props.htmlOffset =
    {left: newBBox.left ? -newBBox.left : 0, top: newBBox.top ? -newBBox.top : 0}; // avoid `-0`

  // Restore position
  elementStyle[cssPropTransform] =
    `translate(${curPosition.left + offset.left}px, ${curPosition.top + offset.top}px)`;
  // Restore size
  ['width', 'height'].forEach(prop => {
    if (newBBox[prop] !== orgSize[prop]) {
      // Ignore `box-sizing`
      elementStyle[prop] = orgSize[prop] + 'px';
      newBBox = getBBox(element);
      if (newBBox[prop] !== orgSize[prop]) { // Retry
        elementStyle[prop] = orgSize[prop] - (newBBox[prop] - orgSize[prop]) + 'px';
      }
    }
    props.lastStyle[prop] = elementStyle[prop];
  });

  // Restore `transition-property`
  element.offsetWidth; /* force reflow */ // eslint-disable-line no-unused-expressions
  elementStyle[cssPropTransitionProperty] = orgTransitionProperty;
  if (fixPosition.left !== curPosition.left || fixPosition.top !== curPosition.top) {
    // It seems that it is moving.
    elementStyle[cssPropTransform] =
      `translate(${fixPosition.left + offset.left}px, ${fixPosition.top + offset.top}px)`;
  }

  return fixPosition;
}
function initTranslate(props) {
  const element = props.element,
    elementStyle = props.elementStyle,
    curPosition = getBBox(element), // Get BBox before change style.
    RESTORE_PROPS = ['display', 'marginTop', 'marginBottom', 'width', 'height'];
  RESTORE_PROPS.unshift(cssPropTransform);

  // Reset `transition-property` every time because it might be changed frequently.
  const orgTransitionProperty = elementStyle[cssPropTransitionProperty];
  elementStyle[cssPropTransitionProperty] = 'none'; // Disable animation
  const fixPosition = getBBox(element);

  if (!props.orgStyle) {
    props.orgStyle = RESTORE_PROPS.reduce((orgStyle, prop) => {
      orgStyle[prop] = elementStyle[prop] || '';
      return orgStyle;
    }, {});
    props.lastStyle = {};
  } else {
    RESTORE_PROPS.forEach(prop => {
      // Skip this if it seems user changed it. (it can't check perfectly.)
      if (props.lastStyle[prop] == null || elementStyle[prop] === props.lastStyle[prop]) {
        elementStyle[prop] = props.orgStyle[prop];
      }
    });
  }

  const orgSize = getBBox(element),
    cmpStyle = window.getComputedStyle(element, '');
  // https://www.w3.org/TR/css-transforms-1/#transformable-element
  if (cmpStyle.display === 'inline') {
    elementStyle.display = 'inline-block';
    ['Top', 'Bottom'].forEach(dirProp => {
      const padding = parseFloat(cmpStyle[`padding${dirProp}`]);
      // paddingTop/Bottom make padding but don't make space -> negative margin in inline-block
      // marginTop/Bottom don't work in inline element -> `0` in inline-block
      elementStyle[`margin${dirProp}`] = padding ? `-${padding}px` : '0';
    });
  }
  elementStyle[cssPropTransform] = 'translate(0, 0)';
  // Get document offset.
  let newBBox = getBBox(element);
  const offset = props.htmlOffset =
    {left: newBBox.left ? -newBBox.left : 0, top: newBBox.top ? -newBBox.top : 0}; // avoid `-0`

  // Restore position
  elementStyle[cssPropTransform] =
    `translate(${curPosition.left + offset.left}px, ${curPosition.top + offset.top}px)`;
  // Restore size
  ['width', 'height'].forEach(prop => {
    if (newBBox[prop] !== orgSize[prop]) {
      // Ignore `box-sizing`
      elementStyle[prop] = orgSize[prop] + 'px';
      newBBox = getBBox(element);
      if (newBBox[prop] !== orgSize[prop]) { // Retry
        elementStyle[prop] = orgSize[prop] - (newBBox[prop] - orgSize[prop]) + 'px';
      }
    }
    props.lastStyle[prop] = elementStyle[prop];
  });

  // Restore `transition-property`
  element.offsetWidth; /* force reflow */ // eslint-disable-line no-unused-expressions
  elementStyle[cssPropTransitionProperty] = orgTransitionProperty;
  if (fixPosition.left !== curPosition.left || fixPosition.top !== curPosition.top) {
    // It seems that it is moving.
    elementStyle[cssPropTransform] =
      `translate(${fixPosition.left + offset.left}px, ${fixPosition.top + offset.top}px)`;
  }

  return fixPosition;
}
function initTranslate ( props ) { const element = props . element , elementStyle = props . elementStyle , curPosition = getBBox ( element ) , // Get BBox before change style. RESTORE_PROPS = [ 'display' , 'marginTop' , 'marginBottom' , 'width' , 'height' ] ; RESTORE_PROPS . unshift ( cssPropTransform ) ; // Reset `transition-property` every time because it might be changed frequently. const orgTransitionProperty = elementStyle [ cssPropTransitionProperty ] ; elementStyle [ cssPropTransitionProperty ] = 'none' ; // Disable animation const fixPosition = getBBox ( element ) ; if ( ! props . orgStyle ) { props . orgStyle = RESTORE_PROPS . reduce ( ( orgStyle , prop ) => { orgStyle [ prop ] = elementStyle [ prop ] || '' ; return orgStyle ; } , { } ) ; props . lastStyle = { } ; } else { RESTORE_PROPS . forEach ( prop => { // Skip this if it seems user changed it. (it can't check perfectly.) if ( props . lastStyle [ prop ] == null || elementStyle [ prop ] === props . lastStyle [ prop ] ) { elementStyle [ prop ] = props . orgStyle [ prop ] ; } } ) ; } const orgSize = getBBox ( element ) , cmpStyle = window . getComputedStyle ( element , '' ) ; // https://www.w3.org/TR/css-transforms-1/#transformable-element if ( cmpStyle . display === 'inline' ) { elementStyle . display = 'inline-block' ; [ 'Top' , 'Bottom' ] . forEach ( dirProp => { const padding = parseFloat ( cmpStyle [ ` ${ dirProp } ` ] ) ; // paddingTop/Bottom make padding but don't make space -> negative margin in inline-block // marginTop/Bottom don't work in inline element -> `0` in inline-block elementStyle [ ` ${ dirProp } ` ] = padding ? ` ${ padding } ` : '0' ; } ) ; } elementStyle [ cssPropTransform ] = 'translate(0, 0)' ; // Get document offset. let newBBox = getBBox ( element ) ; const offset = props . htmlOffset = { left : newBBox . left ? - newBBox . left : 0 , top : newBBox . top ? - newBBox . top : 0 } ; // avoid `-0` // Restore position elementStyle [ cssPropTransform ] = ` ${ curPosition . left + offset . left } ${ curPosition . top + offset . top } ` ; // Restore size [ 'width' , 'height' ] . forEach ( prop => { if ( newBBox [ prop ] !== orgSize [ prop ] ) { // Ignore `box-sizing` elementStyle [ prop ] = orgSize [ prop ] + 'px' ; newBBox = getBBox ( element ) ; if ( newBBox [ prop ] !== orgSize [ prop ] ) { // Retry elementStyle [ prop ] = orgSize [ prop ] - ( newBBox [ prop ] - orgSize [ prop ] ) + 'px' ; } } props . lastStyle [ prop ] = elementStyle [ prop ] ; } ) ; // Restore `transition-property` element . offsetWidth ; /* force reflow */ // eslint-disable-line no-unused-expressions elementStyle [ cssPropTransitionProperty ] = orgTransitionProperty ; if ( fixPosition . left !== curPosition . left || fixPosition . top !== curPosition . top ) { // It seems that it is moving. elementStyle [ cssPropTransform ] = ` ${ fixPosition . left + offset . left } ${ fixPosition . top + offset . top } ` ; } return fixPosition ; }
Initialize HTMLElement for `translate`, and get `offset` that is used by `moveTranslate`.
@param {props} props - `props` of instance.
@returns {BBox} Current BBox without animation, i.e. left/top properties.
Initialize HTMLElement for translate and get offset that is used by moveTranslate .