jQuery Ui Draggable将px值转换为百分比

Question

如何在设置时将ui.position.top值转换为百分比data-offset属性。

.draggable({
                        scroll: false,
                        axis: "y",
                        drag: function (event, ui) {
                            y1 = $parent.height();//height of the parent elem
                            y2 = $elem.height(); //height of the elem that is being dragged
                            if (ui.position.top >= 0) {
                                ui.position.top = 0;
                            } else if (ui.position.top <= (y1 - y2)) {
                                ui.position.top = y1 - y2;
                            }
                        },
                        stop: function(event, ui) {
                            //convert value to percentage and set prop.
                            $('.cover').attr('data-offset', ui.offset.top);
                        }
                    }

Answer 1

如果要从文档顶部查找位置，请尝试以下操作：

$('.cover').attr('data-offset', Math.ceil(ui.offset.top / $parent.height() * 100));

如果要从父级的顶部寻找位置，这是：

$('.cover').attr('data-offset', Math.ceil(ui.position.top / $parent.height() * 100));

Answer 2

请考虑以下示例。

$(function() {
  function topToPerc(t, p, round) {
    var result = 0;
    if (round == undefined) {
      result = parseFloat(((t / p) * 100).toFixed(2));
    } else {
      result = Math.round((t / p) * 100);
    }
    return result;
  }

  $(".box").each(function(i, el) {
    if (i != 2) {
      $("p", el).html(topToPerc($(el).position().top, $(".page").height()) + "%");
    } else {
      $("p", el).html(topToPerc($(el).position().top, $(".page").height(), true) + "%");
    }
  });

  $(".box").draggable({
    axis: "y",
    containment: [0, 0, 350, 200],
    drag: function(e, ui) {
      if ($(this).index() != 2) {
        $("p", this).html(topToPerc(ui.position.top, $(".page").height()) + "%");
      } else {
        $("p", this).html(topToPerc(ui.position.top, $(".page").height(), true) + "%");
      }
    }
  });
});

body,
.page {
  margin: 0;
  padding: 0;
}

.page {
  position: relative;
  height: 200px;
}

.box {
  width: 150px;
  height: 2em;
  position: absolute;
}

.box p {
  margin: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="page">
  <div class="box ui-widget-content" style="top: 10px; left: 8px; background: #fcc;">
    <p></p>
  </div>

  <div class="box ui-widget-content" style="top: 175px; left: 160px; background: #cfc;">
    <p></p>
  </div>

  <div class="box ui-widget-content" style="top: 200px; left: 312px; background: #ccf;">
    <p></p>
  </div>
</div>

您的帖子未包含完整的示例。所以我不确定您要寻找什么。如您所见，这显示了基于高度的百分比。您也可以考虑使用修改后的Slider：https://jqueryui.com/slider/#slider-vertical

更新

调整后的密闭度和功能。现在，它接受一个top值和一个父级height值并计算百分比。