Javascript 如何向可拖动元素添加间隔

我创建了一个可以选择不同间隔的条。我正试图使其可拖动，我成功地实现了这一点。我的问题是，我可以拖动绿色的抓取条（其中显示“预算”）。我希望能够拖动抓取杆，然后将其放置在范围点所在的位置（间隔），并将抓取杆保持在外部元素

#滑块

内

不管怎样，我可以改变我必须要做的事情，使之成为可能吗

$（函数（）{
$（“#sliderInterval”）.draggable（）；
});
$（函数（）{
var iSelected=0；
变量范围=[{
下限：500，
上限：1000
}, {
下限：1100，
上限：2000
}, {
下限：2100，
上限：5000
}, {
下限：5100，
上限：10000
}, {
下限：11000，
上限：20000
}, {
下限：21000，
上限：50000
}, ];
var wslider=$（“#滑块”）.width（）/（ranges.length）；
对于（变量i=0；i
#项目滑块容器{
宽度：80%；
高度：自动；
利润率：40px0%30px0%；
文本对齐：居中；
}
#项目滑块标题{
文本对齐：左对齐；
字体大小：1.2米；
字体大小：粗体；
边缘底部：15px；
}
#项目滑块说明{
文本对齐：左对齐；
字号：1em；
线高：1.3em；
颜色：#2a2a2a；
}
#滑块{
边界半径：15px；
宽度：100%；
高度：40px；
利润率：30px0；
背景#454343；
位置：相对位置；
溢出：隐藏；
}
.间隔圈{
边界半径：50%；
高度：10px；
宽度：10px；
背景：#CCC；
z指数：1；
显示：内联块；
边缘顶部：18px；
光标：指针；
}
.intervalCircle:悬停{
边界半径：50%；
高度：25px；
宽度：25px；
背景：#0085A1；
z指数：1；
显示：内联块；
利润上限：11px；
光标：指针；
}
兰格多特先生{
高度：40px；
位置：绝对位置；
文本对齐：居中；
左：0px；
顶部：-8px；
光标：指针；
}
#幻灯片间期{
身高：100%；
边界半径：15px；
位置：绝对位置；
文本对齐：居中；
z指数：99；
颜色：#FFF；
字体大小：粗体；
背景：#00a16d；
线高：40px；
}
#幻灯片预算{
填充：0 5px；
}
#虎皮鹦鹉山{
字号：1.5em；
颜色：#00a16d；
}

优先预算
预算
这里有一种使用滑块的方法

工作示例：

HTML

<div id="project-slider-container">
  <div id="project-slider-title">PREFERRED BUDGET</div>
  <div id="project-slider-description">A transparent budget will help set expectations. A higher budget allows for a more complex website project.</div>
  <div class="slide-wrap">
    <div id="slider">
      <div id="custom-handle" class="ui-slider-handle">BUDGET</div>
    </div>
  </div>
  <div id="budgetAmount"></div>
</div>

JavaScript

$(function(){
   var ranges = [{
     lower: 500,
     upper: 1000
   }, {
     lower: 1100,
     upper: 2000
   }, {
     lower: 2100,
     upper: 5000
   }, {
     lower: 5100,
     upper: 10000
   }, {
     lower: 11000,
     upper: 20000
   }, {
     lower: 21000,
     upper: 50000
   }, ];
   var handle = $("#custom-handle");
   var amount = $("#budgetAmount");
   $("#slider").slider({
     min: 0,
     max: 5,
     step: 1,
     create: function() {
       var i = $(this).slider("value");
       amount.text("$" + ranges[i].lower + " - $" + ranges[i].upper);
       $.each(ranges, function(key, item) {
         var range = $("<div>", {
           class: "rangedot"
         }).data("key", key);
         var dot = $("<div>", {
           class: "intervalCircle"
         }).appendTo(range);
         var l = Math.round(100 / (ranges.length - 1) * key);
         var w = $("#slider").width() / (ranges.length);
         range.css({
           left: "calc(" + l + "% - " + (w / 2) + "px)",
           width: w + "px"
         }).click(function() {
           $("#slider").slider("value", $(this).data("key"));
         }).appendTo("#slider");
       });
     },
     slide: function(event, ui) {
       var i = ui.value;
       amount.text("$" + ranges[i].lower + " - $" + ranges[i].upper);
     }
   });
});

$（函数（）{
变量范围=[{
下限：500，
上限：1000
}, {
下限：1100，
上限：2000
}, {
下限：2100，
上限：5000
}, {
下限：5100，
上限：10000
}, {
下限：11000，
上限：20000
}, {
下限：21000，
上限：50000
}, ];
变量句柄=$（“#自定义句柄”）；
风险值金额=$（“预算金额”）；
$（“#滑块”）.滑块({
分:0,，
最高：5，
步骤：1，
创建：函数（）{
变量i=$（此）.slider（“值”）；
金额.text（“$”+范围[i]。下限+“-$”+范围[i]。上限）；
$。每个（范围、功能（键、项）{
变量范围=$（“”{
类别：“rangedot”
}).数据（“键”，键）；
变量点=$（“”{
班级：“间隔圈”
}).appendTo（范围）；
var l=数学四舍五入（100/（ranges.length-1）*键）；
var w=$（“#滑块”）.width（）/（ranges.length）；
range.css({
左：“计算（“+l+”%-“+（w/2）+“px）”，
宽度：w+“px”
})。单击（函数（）{
$（“#slider”）.slider（“value”），$（this.data（“key”））；
}).appendTo（“#滑块”）；
});
},
幻灯片：功能（事件、用户界面）{
var i=ui.value；
金额.text（“$”+范围[i]。下限+“-$”+范围[i]。上限）；
}
});
});

更新

如果你想用draggable做这个，我建议你这样做

例如：

$（函数（）{
var iSelected=0；
变量范围=[{
下限：500，
上限：1000
}, {
下限：1100，
上限：2000
}, {
下限：2100，
上限：5000
}, {
下限：5100，
上限：10000
}, {
下限：11000，
上限：20000
}, {
下限：21000，
上限：50000
}];
var wslider=$（“#滑块”）.width（）/（ranges.length）；
$（“#slidenterval”）.draggable({
轴：“x”，
网格：[wslider，0]，
遏制：“滑块”，
});
对于（变量i=0；i$(function(){
   var ranges = [{
     lower: 500,
     upper: 1000
   }, {
     lower: 1100,
     upper: 2000
   }, {
     lower: 2100,
     upper: 5000
   }, {
     lower: 5100,
     upper: 10000
   }, {
     lower: 11000,
     upper: 20000
   }, {
     lower: 21000,
     upper: 50000
   }, ];
   var handle = $("#custom-handle");
   var amount = $("#budgetAmount");
   $("#slider").slider({
     min: 0,
     max: 5,
     step: 1,
     create: function() {
       var i = $(this).slider("value");
       amount.text("$" + ranges[i].lower + " - $" + ranges[i].upper);
       $.each(ranges, function(key, item) {
         var range = $("<div>", {
           class: "rangedot"
         }).data("key", key);
         var dot = $("<div>", {
           class: "intervalCircle"
         }).appendTo(range);
         var l = Math.round(100 / (ranges.length - 1) * key);
         var w = $("#slider").width() / (ranges.length);
         range.css({
           left: "calc(" + l + "% - " + (w / 2) + "px)",
           width: w + "px"
         }).click(function() {
           $("#slider").slider("value", $(this).data("key"));
         }).appendTo("#slider");
       });
     },
     slide: function(event, ui) {
       var i = ui.value;
       amount.text("$" + ranges[i].lower + " - $" + ranges[i].upper);
     }
   });
});

$(function() {
   var iSelected = 0;
   var ranges = [{
     lower: 500,
     upper: 1000
   }, {
     lower: 1100,
     upper: 2000
   }, {
     lower: 2100,
     upper: 5000
   }, {
     lower: 5100,
     upper: 10000
   }, {
     lower: 11000,
     upper: 20000
   }, {
     lower: 21000,
     upper: 50000
   }];
   var wslider = $("#sliderBar").width() / (ranges.length);
   $("#sliderInterval").draggable({
     axis: "x",
     grid: [wslider, 0],
     containment: "#sliderBar",
   });
   for (var i = 0; i < ranges.length; i++) {
     var range = $('<div class="rangedot"><div class="intervalCircle"></div></div>');
     var left = (100 / (ranges.length) * i);
     rangeleft = "calc(" + left + "% - 2px)";
     range.css({
       left: rangeleft,
       width: wslider
     });
     range.on("click", function(idx) {
       return function() {
         iSelected = idx;
         var sliderleft = wslider * idx;
         $("#sliderInterval").animate({
           left: sliderleft
         });
         $("#budgetAmount").text("$" + ranges[idx].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + "$" + ranges[idx].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
       };
     }(i));
     $("#sliderBar").append(range);
     $("#sliderInterval").css("width", wslider + "px");
   }
   $("#budgetAmount").show().text("$500 - $1,000");
});