javascript - 暗示特定位置条件的可拖动用户界面

Question

我正在为一个特定的问题而苦苦挣扎。我实际上有一个基于 4 个网格的可拖动元素，我想在每次可拖动项到达此网格上的特定位置时创建一个事件。

这是这个网格的html，

<div class="selector">
  <div class="title">
    <h2>Vælg lånebeløb</h2>
  </div>
  <div class="draggable">
    <h3 id="krd">kr</h3>
  </div>
  <div class="line">
    <img src="./resources/images/line.png" alt="line">
  </div>
  <div class="legend">
    <p>3.000</p>
    <p>4.000</p>
    <p>5.000</p>
    <p>6.000</p>
  </div>
</div>

这里是 jquery，

$("#krd").draggable({
  grid: [ 190, 0 ],
  cursor: "move",
  containment: '.selector',
  drag: function( event, ui ) {
    if(ui.position.left = 190) {
    $(".bluebox h2").text("3.000 Kr");
    } else if (ui.position.left = 380) {
      ect......
    } {

    }
  }
});

我想做的是，当我们移动栏时，它会更改边栏中的文本。从那以后我尝试了不同的选择，但无法弄清楚我错过了什么。这里是元素github上的页面链接，说不定你会有一个想法。

这里是github中代码的链接<强> https://github.com/erwanriou/goKredit---Frontpage/

和页面渲染以更好地了解问题。<强> https://erwanriou.github.io/goKredit---Frontpage/

Answer 1

根据我的评论，我建议使用 jQuery UI Slider。您需要为其设置主题，但代码为:

$(function() {
  $("#krd").slider({
    min: 3,
    max: 6,
    value: 3,
    slide: function(e, ui) {
      $(".bluebox h2").text(ui.value + ".000 Kr");
    }
  });
});

示例(进行中):https://jsfiddle.net/Twisty/bjfuLjzL/2/