Question

如果返回到原始位置，我想将我滚动浏览jQuery滑块的div的分数重置为0。

这是一个plnk +一些代码;

https://plnkr.co/edit/oqhrDeP52vdzcKqpQvbl?p=preview

$(init);

function init() {

  function findPosition(e, ui) {
    var position = sliderDiv.position(),
      sliderWidth = sliderDiv.width(),
      minX = position.left,
      maxX = minX + sliderWidth,
      tickSize = sliderWidth / range;

    var finalMidPosition = ui.offset.left - 53 + Math.round($(divs).width() / 2 - 5)

    if (finalMidPosition >= minX && finalMidPosition <= maxX) {
      var val = Math.round((finalMidPosition - minX) / tickSize); 
      sliderDiv.slider("value", val);
      $(".slider-value", this).html(val);
      $("#text1").val($(".item1 .slider-value").html())

    }
  }

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

  sliderDiv.slider({
    min: 0,
    max: range,
  });


  var divs = '.itemContainer'
  $(divs).draggable({
    containment: "#containment",
    cursor: 'move',
    snap: '#ratingBar',
    snapMode: 'outer',
    drag: findPosition,

    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: findPosition,
    out: function(event, ui) {
      $(".slider-value", ui.draggable).html(0);
      $("#text1").val($(".item1 .slider-value").html())

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

我已经按照预期在另一个plnk中工作，这让我相信问题是使用Draggable中的Drag：findPosition或使用$(".slider-value", this).html(val);而不是{{1}的变体}。

下面是一个具有所需效果的plnk，但不会自动更新该值;

https://plnkr.co/edit/GIfq7Ws0EsjyS7yRhIzl?p=preview

感谢您提供任何帮助/建议！

Answer 1

我提供此解决方案。我做了一些小的HTML更改，然后更新了jQuery。

My Fork：https://plnkr.co/edit/IPRoqprQt34Q08pugO9T?p=preview

<强> HTML

  <div id="content">
    <div id="containment">
      <div id="itemArea">
        <div id="row">
          <div class="itemContainer">
            <div class="item1">
              <span class="slider-value"></span>
            </div>
            <div class="candle"></div>
          </div>

        </div>
        <div id="barContainer">
          <div id="ratingBar"></div>
        </div>
      </div>
    </div>
  </div>

<强>的jQuery

$(init);

var over = false;

function init() {

  function findPosition(e, off) {
    if (e == "out") {
      over = false;
      sliderDiv.slider("value", 0);
      $(".slider-value").html(0);
      $("#text1").val(0);
      return;
    }
    if(e == "in"){
      over = true;
    }
    if (over && e == "drag") {
      var position = sliderDiv.position(),
        sliderWidth = sliderDiv.width(),
        minX = position.left,
        maxX = minX + sliderWidth,
        tickSize = sliderWidth / range;

      var finalMidPosition = off.left - 53 + Math.round($(divs).width() / 2 - 5)

      if (finalMidPosition >= minX && finalMidPosition <= maxX) {
        var val = Math.round((finalMidPosition - minX) / tickSize); // had to add -12…
        sliderDiv.slider("value", val);
        $(".slider-value").html(val);
        $("#text1").val(val)
      }

    }
  }

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

  sliderDiv.slider({
    min: 0,
    max: range,
  });

  var divs = '.itemContainer'
  $(divs).draggable({
    containment: "#containment",
    cursor: 'move',
    snap: '#ratingBar',
    snapMode: 'outer',
    drag: function(e, ui) {
      findPosition("drag", ui.offset);
    },
    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: findPosition,
    over: function(e, ui) {
      $("#text1").addClass("hover");
      findPosition("in", ui.offset);
    },
    out: function(event, ui) {
      $("#text1").removeClass("hover");
      findPosition("out", ui.offset);
      $("#text1").val($(".item1 .slider-value").html());
    }
  });
  $(".slider-value").html(sliderDiv.slider('value'));
}

这允许在touch上进行拦截。此外，over仅触发一次，并且不会在整个drag内继续更新。所以我设置了一个标志来指示何时结束true，当它结束时drag正在发生时，我们想要更新这些值。一旦放弃，我们就可以确定要做什么。如果拖动为out，我们会将值恢复为0。

jQuery UI Droppable在out：function上没有按预期工作

1 个答案: