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()）。

以下是您的pluoneer redone：http://plnkr.co/edit/3WSCo77c1cC5uFiYO8bV?p=preview

文档：

Jquery UI

Jquery .find

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

1 个答案: