Calculate top offsset position of draggable Image on div height in percentage-CodePudding

I'm trying to calculate the top offset of my image draggable within a container of fixed height. So I can get the value in percent not in pixels and use that value to set the CSS top positioning of image within a container ".container" depending to the height of container.

<div >
    <img src="" alt="" >
</div>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<style>
    .container{
        position: relative;
        width:  960px;
        height: 300px;
        overflow: hidden;
    }
    .image{
        top: 0;
        width: 100%;
        min-height: 100%;
        min-width: 100%;
    }
</style>

// Js

$(document).ready(function () {
    let $container = $('.container');
    let $image     = $('.image');
    let $conWidth  = $($container).width();
    let $conHeight = $($container).height();
    let $imgWidth  = $image.width();
    let $imgHeight = $image.height();

    $image.draggable({ 
        disabled: false,
        scroll: false,
        axis: 'x, y',
        cursor : 'move',
        drag: (e, ui)=>{
            if(ui.position.top >= 0) ui.position.top = 0;

            if(ui.position.top <= $conHeight - $imgHeight)
                ui.position.top = $conHeight - $imgHeight;

            if(ui.position.left >= 0) ui.position.left = 0;

            if(ui.position.left <= $conWidth - $imgWidth)
                ui.position.left = $conWidth - $imgWidth;
        },
        stop: (e, ui)=>{
            let $offsetHeight = ui.position.top;     
            let $offsetWidth = ui.position.left;
            let realImageHeight = ($conWidth * $conHeight / $imgWidth) - $imgHeight;
            let $top = ($realImageHeight * $offsetHeight / 100 * -1)/100;
            console.log($top) // $top value in percent to be used as top positioning CSS
        }
    });
});

CodePudding user response：

Consider the following.

$(() => {
  var $image = $('.image');
  var $conHeight = $($container).height();

  function percentFormat(dec) {
    return Math.round(dec * 100)   "%";
  }

  $image.draggable({
    disabled: false,
    scroll: false,
    axis: 'x, y',
    cursor: 'move',
    start: (e, ui) => {
      console.log(percentFormat($image.position().top / $conHeight));
    },
    drag: (e, ui) => {
      console.log(percentFormat(ui.position.top / $conHeight));
    },
    stop: (e, ui) => {
      console.log(percentFormat(ui.position.top / $conHeight));
    }
  });
});

.container {
  position: relative;
  width: 960px;
  height: 300px;
  overflow: hidden;
}

.image {
  top: 0;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
}

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<div >
  <img src="" alt="" >
</div>

If you need to calculate the top in percentage, the algorithm would be: position.top / container.height. Example: 120 / 300 = 0.4. We know have a value between 0 and 1. To make this a percentage between 0 and 100, we can multiple the decimal value by 100. (120 / 300) * 100 = 40. This example is very clean, yet you might get something like (85 / 300) * 100 = 28.3333333333, which does not make a very good Percentage. I used Round to clean that up, making the final value 28%.