保存拖动小部件的位置

Posted 2023-05-08

【中文标题】保存拖动小部件的位置

【英文标题】：Save position of the dragged widget

【发布时间】：2020-09-26 08:56:38

【问题描述】：

使用 jquery ui 的可拖动小部件向上/向下移动图像以在容器内显示图像的所需部分（当图像太大而无法容纳在容器内时）。可以向上/向下拖动图像以显示容器内的理想部分（最初图像的中心区域在容器内是可见的）。然后保存位置值以供将来重新加载。

当拖动图像时，底部会出现一个黄色按钮，显示由函数dragCover() 设置的当前位置。这是为将来存储的值。为了进行测试，当您单击该按钮时，它会通过设置 css top 属性来更新图像的位置。如果值正确，则图像不应移动，因为该值将等于当前位置，因为dragCover 设置的值不正确，图像会从其当前位置移开。尝试将图像一直向下拖动，然后单击黄色框，它会向上移动。

https://codepen.io/apprence/pen/KKVwKBN

【问题讨论】：

我在您的 CSS 中发现了各种语法错误。

这是 scss 预处理器。

【参考方案1】：

在您的click 回调中，您最终要做什么有点不清楚。我创建了以下伪视图端口类型的示例，以查看这是否是您要获得的函数/结果类型。

$(function() 
  function calcPerc(el, vp) 
    el = $(el), vp = $(vp);
    var y1 = el.position().top;
    var h = el.height();
    return parseFloat(((y1 / h) * 100).toFixed(2));
  

  function showData(t, p) 
    $(".top").html(t);
    $(".perc").html(p);
  

  $(".item").draggable(
    scroll: false,
    axis: "y",
    cursor: "move",
    containment: [0, -899, 0, 1],
    drag: function(e, ui) 
      showData(ui.position.top, calcPerc(this, $(".viewport")));
    
  );

  $(".perc").click(function() 
    var offsetVal = parseFloat($(this).text()) * 10;
    console.log(offsetVal);
    $(".item").css(
      top: offsetVal + "%"
    );
  );

  $(".buttons button").click(function() 
    $(".item").css("top", $(this).html());
    showData($(".item").position().top, calcPerc($(".item"), $(".viewport")));
  );
);

.viewport 
  position: absolute;
  border: 1px dashed #222;
  top: 0;


.small 
  width: 200px;
  height: 100px;


.tall 
  width: 201px;
  height: 1000px;


.item 
  background-color: #ccf;
  position: absolute;
  top: -299px;


.item span 
  padding-bottom: 80px;
  display: block;
  text-align: center;
  border-bottom: 1px solid #222;


.show 
  position: absolute;
  border: 1px solid #000;
  border-radius: 3px;
  width: 3em;
  padding: 3px;


.show.buttons 
  width: 100px;


.top 
  top: 20px;
  left: 220px;


.perc 
  top: 50px;
  left: 220px;


.buttons 
  top: 80px;
  left: 220px;


.buttons button 
  width: 100%;


.ghost 
  width: 201px;
  background-color: #fff;
  opacity: 0.75;
  height: 900px;
  position: absolute;


.after 
  top: 101px;

<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="container">

  <div class="small viewport">
    <div class="tall item">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  </div>
  <div class="ghost after"></div>
  <div class="show top">-299</div>
  <div class="show perc">-29.9</div>
  <div class="show buttons">
    <button>0%</button>
    <button>-25%</button>
    <button>-500%</button>
    <button>-75%</button>
    <button>-900%</button>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/top

当position 设置为absolute 或fixed 时，top 属性指定元素的上边缘与其包含块的上边缘之间的距离。

包含块高度的<percentage>。

因此，在我的示例中，包含块的高度为 100 像素。因此，将top 设置为-25%，我们必须计算：

top = 100 * -.25
top = -25

因此，我们需要以指数方式增加这一点。要获得正确的位置，-29.12% 需要是 -291.2%。

top = 100 * -2.912
top = -291.2

这应该有助于您的图像移动和查看端口。就个人而言，我会存储并重新加载确切的像素值，但如果您希望存储百分比，您可以这样做。

【讨论】：

谢谢，我会试试的。我正在尝试实现一个封面，就像你在 Facebook 等社交媒体网站上看到的那样，用户在他们的个人资料上上传一张图片，可以通过向上/向下移动并保存位置来重新定位图片，看看里面的那个FB.

@JamieWhite 我对它很熟悉，并且会强烈建议使用长度值而不是百分比。

@JamieWhite 是的，25% 和 75% 都只是为了澄清/展示一个例子。

可以用鼠标滚轮拖动或在笔记本电脑触摸板上上下滑动吗？ @Twisty

@JamieWhite 可能吗？是的，有可能，您只需要使用不同的事件调整元素的位置。我建议创建一个可以将其移动到特定方向的函数，然后将该函数与mousewheel 或scroll 类型的事件的各种回调一起使用。