无法将 Div 附加（定位）到 jQuery UI 滑块处理程序答案

【问题标题】：Not Able to Attach (Position) A Div to jQuery UI Slider Handler无法将 Div 附加（定位）到 jQuery UI 滑块处理程序
【发布时间】：2018-06-23 23:48:13
【问题描述】：

能否请您看一下这个 sn-p，让我知道为什么我无法将 .box 附加到 ui 处理程序

$("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    create: function() {
        $('.box').appendTo($('#slider a').get(0));

    },
    slide: function(event, ui) { $(ui.handle).find('span').html( ui.value); }
});

// only initially needed
$('.box').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(0)'),
    offset: "0, 10"
});

body{
  padding:60px;
  }

#slider 
{
    width: 80%;
    margin-left: 1em;
}

#slider a {
    text-decoration: none;
    outline: none;
}

.box {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
    text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding:12px 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider"></div>
<span class="box"></span>

【问题讨论】：

标签： jquery-ui jquery-ui-slider

【解决方案1】：

元素.box 当前附加到<body>。如果要定位，只需要正确使用.position()即可。

示例：

$(function() {
  $("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    slide: function(event, ui) {
      $(".box").html(ui.value).position({
        my: "center top",
        at: "center bottom+10",
        of: $(".ui-slider-handle", this)
      });
    }
  });

  // only initially needed
  $('.box').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom+10',
    of: $("#slider .ui-slider-handle")
  });
});

body {
  padding: 60px;
}

#slider {
  width: 80%;
  margin-left: 1em;
}

#slider a {
  text-decoration: none;
  outline: none;
}

.box {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
  text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 12px 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider"></div>
<span class="box"></span>

更新

如果你想让把手变成盒子，试试这个。

HTML

<div id="slider"></div>

CSS

.ui-slider span.ui-slider-handle {
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
  text-align: center;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  padding: 12px 12px;
}

JavaScript

$(function() {
  $("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    slide: function(event, ui) {
      $(".ui-slider-handle", this).html(ui.value);
    }
  });
  $("#slider .ui-slider-handle").html($("#slider").slider("value"));
});

【讨论】：

感谢这个 Twist 但为什么我无法通过拖动 .box 来拖动处理程序
如果你想用它作为句柄，那么它里面必须是一个div。或者只是设置手柄本身的样式。