javascript - 如何将 Jquery slider 的值显示到多个放置的 div 中

Question

我正在使用 jQuery UI slider 和拖放来创建一种为每个 div 指定 100 分的评分的方法。

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

http://plnkr.co/edit/wSS2gZnSeJrvoBNDK6L3?p=preview

$(init);

function init() {

  var range = 100;
  var sliderDiv = $('#ratingBar');

  sliderDiv.slider({
    min: 0,
    max: range,
    slide: function(event, ui) {
      $(".slider-value").html(ui.value);
    }
  });

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

  var position = sliderDiv.position(),
    sliderWidth = sliderDiv.width(),
    minX = position.left,
    maxX = minX + sliderWidth,
    tickSize = sliderWidth / range;

  $('#ratingBar').droppable({
    tolerance: 'touch',
    drop: function(e, ui) {
      var finalMidPosition = $(ui.draggable).position().left + Math.round($(divs).width() / 2);
      if (finalMidPosition >= minX && finalMidPosition <= maxX) {
        var val = Math.round((finalMidPosition - minX) / tickSize);
        sliderDiv.slider("value", val);
        $(".slider-value").html(ui.value);
      }
    }
  });

  $(".slider-value").html(sliderDiv.slider('value'));

}

希望有人能给点建议，

干杯

(此外，如果有人知道为什么我可以将 div 放在两边的评级栏之外，请告诉我!)

Answer 1

Jquery 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 函数之上，您需要像这样定义一个更紧密的包含区域:

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],
.....
});

这将防止 draggable 向左、向右或 slider 下方移动。

基本上你抓取对象的位置，调整一些偏移量，调整一些宽度，计算百分比，然后替换 html(也可以使用 text())。

这是你重做的 plunker:http://plnkr.co/edit/3WSCo77c1cC5uFiYO8bV?p=preview

文档:

Jquery UI

Jquery .find