将<div>附加到jQuery滑块句柄</div>

Question

有什么方法可以将div添加到滑块手柄，所以我可以通过拖动该div来控制手柄？请参见附图。

谢谢。

Answer 1

是的，您可以将<div>附加到句柄并使用<div>来控制滑块。拖动事件在手柄的子项上也与在句柄本身上一样有效;所以，你可以给手柄一个适当绝对定位的孩子，如下所示：

// The actual selector would be a little more specific.
$('.ui-slider-handle').append('<span class="sidecar"></span>');

和一些CSS：

/* The dimensions, position, ... are just examples, absolute positioning is the key. */
.sidecar {
    position: absolute;
    top: 50px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #f00;
}

演示：http://jsfiddle.net/ambiguous/9B4MC/