Javascript 如何将Jquery滑块的值显示为多个删除的div

我使用jQueryUI滑块和拖放来创建一种为每个div指定100分的评级的方法

问题是，当我将div拖到滑块上时，我不知道如何获取滑块上每个div的位置值。这是一个plnk+一些代码

$（初始化）；
函数init（）{
var范围=100；
var sliderDiv=$（“#评级条”）；
滑块({
分:0,，
马克斯：射程，
幻灯片：功能（事件、用户界面）{
$（“.slider value”）.html（ui.value）；
}
});
var divs='.itemContainer'
$（divs）.可拖动({
包含：“#内容”，
光标：“移动”，
捕捉：“#评级杆”，
还原：功能（事件、用户界面）{
$（此）.data（“UIDRAGABLE”）。原始位置={
排名：0，
左：0
};
返回！事件；
}
});
变量位置=sliderDiv.position（），
sliderWidth=sliderDiv.width（），
minX=位置。左，
最大值=最小值+滑块宽度，
tickSize=滑块宽度/范围；
$（“#分级栏”）。可拖放({
宽容：“触摸”，
drop：函数（e、ui）{
var finalMidPosition=$（ui.draggable.position（）.left+Math.round（$（divs.width（）/2）；
如果（finalMidPosition>=minX&&finalMidPositionJquery UI有一个名为
stop
的函数，并且您希望在其中处理所有计算：

stop: function(event, ui) {
  // Object dragged
  var e = ui.helper;
  // Offset of that object
  var eOffset = e.offset().left;
  // Sliders offset
  var sliderOffset = sliderDiv.offset().left;
  // Subtract their offsets
  var totalOffset = eOffset - sliderOffset;
  // Width of box dragged
  var boxWidth = ui.helper.width();
  // Subtract their widths to account for overflow on end
  var sliderW = sliderDiv.width() - boxWidth;
  // Get percent moved
  var percent = totalOffset / sliderW * 100;
  // Find .slider-value and replace HTML
  e.find(".slider-value").html(Math.round(percent));
}

这将位于以下位置：

$(divs).draggable({
containment: '#content',
cursor: 'move',
snap: '#ratingBar',
revert: function(event, ui) {
  $(this).data("uiDraggable").originalPosition = {
    top: 0,
    left: 0
  };
  return !event;
},
.... <-- HERE
});

这将防止
draggable
向左、向右或在滑块下方移动

基本上，您可以抓取所抓取对象的位置，调整一些偏移量，调整一些宽度，计算百分比，并替换html（也可以使用
text（）
）

这是您的plunker重做：

文件：


您好-谢谢！这基本上是有效的，但是评级从-15到115，我不确定它的修复方法是什么？如果我更改这两个，它会起作用，但我不确定为什么？//减去它们的偏移量var totalOffset=eOffset-sliderOffset+70；//拖动框的宽度var boxWidth=ui.helper.Width（）-140；我编辑了我的答案，定义了一个更紧密的控制区域。没问题，编码很愉快。
$(divs).draggable({
containment: '#content',
cursor: 'move',
snap: '#ratingBar',
revert: function(event, ui) {
  $(this).data("uiDraggable").originalPosition = {
    top: 0,
    left: 0
  };
  return !event;
},
.... <-- HERE
});

var left = sliderDiv.offset().left;
var right = left + sliderDiv.width();
var top = sliderDiv.offset().top;
var bottom = top + sliderDiv.height();
var height = $(".itemContainer").height();
var width = $(".itemContainer").width();
$(divs).draggable({
     containment: [left, 0, right - width, bottom - height],
.....
});