JqueryUI滑块与Sortable冲突

我正在尝试创建一个包含不同类型输入的拖放表单。选择框、文本框和单选框工作正常，但范围滑块在拖动到可排序字段时不起作用

我在这里创作了一把小提琴：

不过，在工作中硬编码的那个。我需要一个双滑块，否则HTML5范围的输入将是伟大的

任何帮助都将不胜感激

$(function () {
$(".slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function (event, ui) {
        $(".amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));



/* populate the list of fields into the div */
var fields = getFields();
$(fields).each(function (index, value) {
    $("#listOfFields").append("<div class='fld' fieldtype='" + value.type + "'>" + value.label + "</div>");
});

$(".fld").draggable({
    helper: "clone",
    stack: "#containerTable div",
    cursor: "move"
});

$(".droppedFields").droppable({
    activeClass: "activeDroppable",
    hoverClass: "hoverDroppable",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        var fieldtype = $(ui.draggable).attr("fieldtype");
        $("<div  class='fld' fieldtype='" + fieldtype + "'></div>").html(ui.draggable.html()).appendTo(this);
    }
});

$(".droppedFields").sortable();
$(".droppedFields").disableSelection();

$（函数（）{
$（“.slider range”）.slider({
范围：对，
分:0,，
最高：500，
数值：[75300]，
幻灯片：功能（事件、用户界面）{
$（“.amount”）.val（“$”+ui.values[0]+“-$”+ui.values[1]）；
}
});
$（“#金额”）.val（$”+$（“#滑块范围”）.slider（“值”，0）+
“-$”+$（“#滑块范围”）。滑块（“值”，1）；
/*将字段列表填充到div中*/
var fields=getFields（）；
$（字段）。每个（函数（索引、值）{
$（“#列表字段”）.append（“+value.label+”）；
});
$（“.fld”）.draggable({
助手：“克隆”，
堆栈：“#containerTable div”，
光标：“移动”
});
$（“.droppedFields”）.droppable({
activeClass:“ActiveDropable”，
hoverClass:“hoverDropable”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
var fieldtype=$（ui.draggable）.attr（“fieldtype”）；
$（“”）.html（ui.draggable.html（））.appendTo（this）；
}
});
$（“.droppedFields”）.sortable（）；
$（“.droppedFields”）.disableSelection（）；

创建一个函数

initSliders（）

并在您删除的对象构造时调用此函数。虽然这会导致多次初始化，但通常不会导致问题

$(".droppedFields").droppable({
    activeClass: "activeDroppable",
    hoverClass: "hoverDroppable",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        var fieldtype = $(ui.draggable).attr("fieldtype");
        $("<div class='fld' fieldtype='" + fieldtype + "'></div>").html(ui.draggable.html()).appendTo(this);

        // initSlider is called here after appending the code.
        initSliders();
    }
});

---

因为，我不确定这是否是您想要的，我正在添加一个工作的

尝试在滑块掉落时初始化滑块。@如果您不介意，请重新调整一下，如何操作？谢谢，这绝对是一个开始！我特别欣赏小提琴。

var minValue = 75;
var maxValue = 300;

function initSliders() {
    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [minValue, maxValue],
        slide: function (event, ui) {
            minValue = ui.values[0];
            maxValue = ui.values[1];
            $(".amount").val("$" + minValue + " - $" + maxValue);
            $(".slider-range").slider("option", "values", [minValue, maxValue]);
        }
    });

    $(".amount").val("$" + minValue + " - $" + maxValue);
}

$(function () {
    initSliders();
});