jQuery Draggable运行不顺畅。我希望它在拖动时表现得像平滑过渡，但同时值也应该改变。
$(document).ready(abc);
$(window).resize(abc);
function abc() {
var dragParent = $(".drag-parent").height();
var dragRulerLi = $(".drag-ruler ul li").length;
$(".drag-ruler ul li").height(dragParent / dragRulerLi);
$(".drag-ruler").draggable({
axis: "y",
scroll: false,
create: function(event, ui) {
var counterval = $('.ruler-counter').offset().top;
$('.drag-ruler ul li').each(function() {});
},
drag: function(event, ui) {
var counterval = $('.ruler-counter').offset().top;
$('.drag-ruler ul li').each(function() {
if ($(this).offset().top + -20 <= counterval) {
$('.ruler-counter').text($(this).attr('data-counter'))
}
});
}
});
var dragParent = $(".drag-parent").height();
var dragRulerLi = $(".drag-ruler ul li").length;
$(".drag-ruler ul li").height(dragParent / dragRulerLi);
};* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.drag-ruler {
top: 0;
position: absolute;
height: 100%;
width: 50px;
right: 0;
}
.drag-ruler ul li {
list-style: none;
text-align: right;
}
.drag-ruler ul li div span {
display: inline-block;
vertical-align: top;
height: 1px;
background: blue;
width: 40%;
}
.drag-ruler ul li.feet-cell div span {
width: 100%;
}
.drag-ruler ul li.half-inch-cell div span {
width: 60%;
display: inline-block;
vertical-align: top;
}
.drag-parent {
position: relative;
overflow: hidden;
height: 500px;
}
.ruler-counter {
background: #26a69a;
position: fixed;
width: 41px;
top: 250px;
height: 30px;
margin-top: -25px;
right: 55px;
text-align: center;
line-height: 30px;
color: #fff;
border-radius: 3px;
}
.ruler-counter:after {
position: absolute;
top: 50%;
margin-top: -5px;
left: 100%;
content: '';
display: table;
border: 5px solid transparent;
border-left: 5px solid #26a69a;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div class="drag-parent">
<div class="ruler-counter"> <span></span>
</div>
<div class="drag-ruler">
<ul>
<li class="feet-cell" data-counter="1">
<div><span></span>
</div>
</li>
<li data-counter="1.1">
<div><span></span>
</div>
</li>
<li data-counter="1.2">
<div><span></span>
</div>
</li>
<li data-counter="1.3">
<div><span></span>
</div>
</li>
<li data-counter="1.4">
<div><span></span>
</div>
</li>
<li data-counter="1.5">
<div><span></span>
</div>
</li>
<li data-counter="1.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="1.7">
<div><span></span>
</div>
</li>
<li data-counter="1.8">
<div><span></span>
</div>
</li>
<li data-counter="1.9">
<div><span></span>
</div>
</li>
<li data-counter="1.10">
<div><span></span>
</div>
</li>
<li data-counter="1.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="2">
<div><span></span>
</div>
</li>
<li data-counter="2.1">
<div><span></span>
</div>
</li>
<li data-counter="2.2">
<div><span></span>
</div>
</li>
<li data-counter="2.3">
<div><span></span>
</div>
</li>
<li data-counter="2.4">
<div><span></span>
</div>
</li>
<li data-counter="2.5">
<div><span></span>
</div>
</li>
<li data-counter="2.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="2.7">
<div><span></span>
</div>
</li>
<li data-counter="2.8">
<div><span></span>
</div>
</li>
<li data-counter="2.9">
<div><span></span>
</div>
</li>
<li data-counter="2.10">
<div><span></span>
</div>
</li>
<li data-counter="2.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="3">
<div><span></span>
</div>
</li>
<li data-counter="3.1">
<div><span></span>
</div>
</li>
<li data-counter="3.2">
<div><span></span>
</div>
</li>
<li data-counter="3.3">
<div><span></span>
</div>
</li>
<li data-counter="3.4">
<div><span></span>
</div>
</li>
<li data-counter="3.5">
<div><span></span>
</div>
</li>
<li data-counter="3.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="3.7">
<div><span></span>
</div>
</li>
<li data-counter="3.8">
<div><span></span>
</div>
</li>
<li data-counter="3.9">
<div><span></span>
</div>
</li>
<li data-counter="3.10">
<div><span></span>
</div>
</li>
<li data-counter="3.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="4">
<div><span></span>
</div>
</li>
<li data-counter="4.1">
<div><span></span>
</div>
</li>
<li data-counter="4.2">
<div><span></span>
</div>
</li>
<li data-counter="4.3">
<div><span></span>
</div>
</li>
<li data-counter="4.4">
<div><span></span>
</div>
</li>
<li data-counter="4.5">
<div><span></span>
</div>
</li>
<li data-counter="4.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="4.7">
<div><span></span>
</div>
</li>
<li data-counter="4.8">
<div><span></span>
</div>
</li>
<li data-counter="4.9">
<div><span></span>
</div>
</li>
<li data-counter="4.10">
<div><span></span>
</div>
</li>
<li data-counter="4.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="5">
<div><span></span>
</div>
</li>
<li data-counter="5.1">
<div><span></span>
</div>
</li>
<li data-counter="5.2">
<div><span></span>
</div>
</li>
<li data-counter="5.3">
<div><span></span>
</div>
</li>
<li data-counter="5.4">
<div><span></span>
</div>
</li>
<li data-counter="5.5">
<div><span></span>
</div>
</li>
<li data-counter="5.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="5.7">
<div><span></span>
</div>
</li>
<li data-counter="5.8">
<div><span></span>
</div>
</li>
<li data-counter="5.9">
<div><span></span>
</div>
</li>
<li data-counter="5.10">
<div><span></span>
</div>
</li>
<li data-counter="5.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="6">
<div><span></span>
</div>
</li>
<li data-counter="6.1">
<div><span></span>
</div>
</li>
<li data-counter="6.2">
<div><span></span>
</div>
</li>
<li data-counter="6.3">
<div><span></span>
</div>
</li>
<li data-counter="6.4">
<div><span></span>
</div>
</li>
<li data-counter="6.5">
<div><span></span>
</div>
</li>
<li data-counter="6.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="6.7">
<div><span></span>
</div>
</li>
<li data-counter="6.8">
<div><span></span>
</div>
</li>
<li data-counter="6.9">
<div><span></span>
</div>
</li>
<li data-counter="6.10">
<div><span></span>
</div>
</li>
<li data-counter="6.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="7">
<div><span></span>
</div>
</li>
<li data-counter="7.1">
<div><span></span>
</div>
</li>
<li data-counter="7.2">
<div><span></span>
</div>
</li>
<li data-counter="7.3">
<div><span></span>
</div>
</li>
<li data-counter="7.4">
<div><span></span>
</div>
</li>
<li data-counter="7.5">
<div><span></span>
</div>
</li>
<li data-counter="7.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="7.7">
<div><span></span>
</div>
</li>
<li data-counter="7.8">
<div><span></span>
</div>
</li>
<li data-counter="7.9">
<div><span></span>
</div>
</li>
<li data-counter="7.10">
<div><span></span>
</div>
</li>
<li data-counter="7.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="8">
<div><span></span>
</div>
</li>
<li data-counter="8.1">
<div><span></span>
</div>
</li>
<li data-counter="8.2">
<div><span></span>
</div>
</li>
<li data-counter="8.3">
<div><span></span>
</div>
</li>
<li data-counter="8.4">
<div><span></span>
</div>
</li>
<li data-counter="8.5">
<div><span></span>
</div>
</li>
<li data-counter="8.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="8.7">
<div><span></span>
</div>
</li>
<li data-counter="8.8">
<div><span></span>
</div>
</li>
<li data-counter="8.9">
<div><span></span>
</div>
</li>
<li data-counter="8.10">
<div><span></span>
</div>
</li>
<li data-counter="8.11">
<div><span></span>
</div>
</li>
<li class="feet-cell" data-counter="9">
<div><span></span>
</div>
</li>
<li data-counter="9.1">
<div><span></span>
</div>
</li>
<li data-counter="9.2">
<div><span></span>
</div>
</li>
<li data-counter="9.3">
<div><span></span>
</div>
</li>
<li data-counter="9.4">
<div><span></span>
</div>
</li>
<li data-counter="9.5">
<div><span></span>
</div>
</li>
<li data-counter="9.6" class="half-inch-cell">
<div><span></span>
</div>
</li>
<li data-counter="9.7">
<div><span></span>
</div>
</li>
<li data-counter="9.8">
<div><span></span>
</div>
</li>
<li data-counter="9.9">
<div><span></span>
</div>
</li>
<li data-counter="9.10">
<div><span></span>
</div>
</li>
<li data-counter="9.11">
<div><span></span>
</div>
</li>
</ul>
</div>
</div>
查看JSFiddle。