如何将Jquery滑块的值显示为多个丢弃的div

Question

我正在使用jQuery UI滑块并拖放以创建一种为每个div指定100的评级的方法.

问题是当我将div拖到滑块上时,我不知道如何获取滑块上每个div的位置值.这是一个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向左、向右或在滑块下方移动。

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

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

文档：

jQuery用户界面

Jquery .find