jQuery-ui-draggable 将像素值转换为百分比

Posted 2023-05-08

【中文标题】jQuery-ui-draggable 将像素值转换为百分比

【英文标题】：jQuery-ui-draggable convert pixel value to percentage

【发布时间】：2020-09-24 01:10:57

【问题描述】：

设置时如何将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);
    

【参考方案1】：

考虑以下示例。

$(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 值并计算百分比。

【讨论】：

移动对象时，可拖动小部件将当前位置值附加到目标元素，有什么方法可以获取该值并将其转换为 % 并将其附加到$('.cover')？我尝试了两个答案（包括@Souleste），给出的值出现了例如当我在父级中将目标元素一直向下拖动时，该值应该接近 -100%，但在 -50% 左右。可能会更好地获取可拖动小部件在拖动时附加到目标元素的值并将其转换为百分比？例如<img ... style="left: 0px;top: -382.406px;">

@JamieWhite 你可以用ui.position.top 做到这一点；但它应该是父级或文档或窗口的相对百分比？ $('.cover') 在您的帖子中未定义。

家长。 .cover 是一个带有一些文本的 div

@JamieWhite 更新了答案以更好地满足您的需求。由于您没有提供最小的、可重现的示例 (***.com/help/minimal-reproducible-example)，因此我没有任何 HTML 参考。我不知道$(".cover") 是什么。

【参考方案2】：

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

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

如果你正在寻找父级顶部的位置：

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