jquery-ui - .draggable mm 而不是位置 px？

Question

我能以某种方式获得 .draggable 函数的 mm 而不是 px 吗？当我在使用它时查看我的检查器时，我得到 top:'some px' left:'some px'。

无论如何从一开始就说“我需要mm而不是px”或者将px转换为mm？我的父对象已经有 mm，所以我真的需要在 top 和 left 值上也有 mm。

Answer 1

这在某种程度上取决于你为什么要这样做，因为:

The correlation between pixels and physical measurements depends entirely on the display and how many physical pixels there are per (square) millimeter. 72ppi (pixels per inch) used to be a typical resolution, but with pixel density increasing across many devices, that's not a given anymore.

There's simply no standard formula.
- deceze

如果您不需要那么准确，您可以通过说 a mm = 3.779528px 来猜测它，但对于大多数用途来说，这会导致比它解决的问题更多的问题。

$('.draggable').draggable({
  containment: 'parent',
  drag: function(event, ui) {
    $('.pos').html(
      '<p>top:' + $('.draggable').position().top / 3.779528 + 'mm</p>' +
      '<p>left:' + $('.draggable').position().left / 3.779528 + 'mm</p>'

    );
  }
});

.parent {
  position: relative;
  width: 100mm;
  height: 100mm;
  background: silver
}
.draggable {
  height: 20mm;
  width: 20mm;
  background: grey
}
.pos {
  position: fixed;
  bottom: 0;
  color blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<div class="parent">
  <div class="draggable"></div>
</div>
<div class="pos"></div>