使用可拖动的百分比问题答案

【问题标题】：Problems with percentage using draggable使用可拖动的百分比问题
【发布时间】：2019-09-22 04:32:08
【问题描述】：

我用jquery UI中的draggable来做一个拖拽效果，难点是从0到100计算拖拽在bar里面的位置。这是我所做的：

$('.drag').draggable({
	axis: 'x',
	containment: 'parent',
	drag: function() {
		var largura = $('.bar').width();
		var posicaoX = $(this).position().left;
		posicaoX = (posicaoX*100)/largura;
		var l = (100 * parseFloat($(this).position().left / parseFloat($(this).parent().width())));
		$('#show').val(l);
	}
});

.bar{
  width: 150px;
  height: 5px;
  background: #000000;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}
.drag{
  width: 20px;
  height: 20px;
  background: #d18f4f;
  position: absolute;
  top: -7px;
  left: 0px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="bar">
  <div class="drag"></div>
</div>
<input type="text" value="0" id="show">

代码似乎是对的，我想我必须计算拖动的大小并增加或减少总数，或者什么，你能帮我吗？

【问题讨论】：

不是您的答案，但jqueryui.com/slider 会更好地满足您的需求，并且易于计算价值..

标签： jquery jquery-ui draggable

【解决方案1】：

由于您正在处理 .drag 元素的左边缘，因此您必须考虑该元素的宽度，因为 draggable 不会让右侧滑过 .bar 的末尾

这么简单：

var l = (100 * parseFloat($(this).position().left / parseFloat($(this).parent().width()-20)));

或

var l = (100 * parseFloat($(this).position().left / parseFloat($(this).parent().width() - $(this).width()));

【讨论】：