保存拖动的小部件的位置

Question

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

拖动图像时，底部会出现一个黄色按钮，显示函数 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

When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block.

A <percentage> of the containing block's height.

因此，对于我的示例，包含块的高度为 100 像素。因此，一个top设置为-25%，我们要计算的是：

top = 100 * -.25
top = -25

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

top = 100 * -2.912
top = -291.2

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

保存拖动的小部件的位置

Save position of the dragged widget

javascript

jquery

jquery-ui

jquery-ui-draggable