保存被拖动的小组件的位置

Question

使用jquery ui的可拖动部件，将图像向上移动，在容器内显示出图像的理想部分（当图像太大而无法放入容器内时）。图像可以向上拖动以显示容器内的理想部分（最初图像的中心区域在容器内可见）。该位置值将被保存以备将来重新加载。

当图像被拖动时，底部会出现一个黄色按钮，显示当前由功能设置的位置。dragCover(). 这是存储的值，以备将来使用。为了测试，当你点击该按钮时，它会通过设置css top prop来更新图片的位置。如果值是正确的，图像不应该移动，因为该值将等于当前位置，由于 dragCover 设置了一个不正确的值，图像会从当前位置移动。试着将图像一直向下拖动，然后点击黄色方框，它就会重新向上移动。

https:/codepen.ioapprencepenKKVwKBN

Answer 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.orgen-USdocsWebCSStop

当 position 设置为 absolute 或 fixedజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజ top 属性指定了元素的顶边和包含块的顶边之间的距离。

A <percentage> 的高度，所以，在我的例子中，包含块的高度是100px。

因此，在我的例子中，包含块的高度是100px。因此，一个 top 设为 -25%，我们必须计算。

top = 100 * -.25
top = -25

因此，我们需要将其成倍增加。才能得到正确的位置。-29.12%，需要 -291.2%.

top = 100 * -2.912
top = -291.2

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