保存拖动小部件的位置

Question

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

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

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

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.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

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