Question

我正在使用来自Jquery UI的draggable来执行拖动效果，困难在于要计算从0到100的拖动在条形内的位置。这是我所做的：

$('.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">

代码似乎是正确的，我想我必须计算拖动的大小并增加或减少总数，或者有什么可以帮助我的吗？

Answer 1

由于您要处理.drag元素的左边缘，因此必须考虑该元素的宽度，因为可拖动的内容不会让其右侧滑过.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()));

使用可拖动

1 个答案: