JqueryUI Slider 与 Sortable 冲突

Posted 2023-03-13

【中文标题】JqueryUI Slider 与 Sortable 冲突

【英文标题】：JqueryUI Slider conflicts with Sortable

【发布时间】：2014-03-26 20:20:43

【问题描述】：

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

我在这里创建了一个小提琴：

http://jsfiddle.net/b8HpR/

虽然在作品中是硬编码的。我需要一个双滑块，否则 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();

【问题讨论】：

尝试在你的滑块被放下时初始化它。

@ReCaptcha 如果你不介意，你会怎么做？

【参考方案1】：

创建一个函数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();
    
);

所以每次你初始化一个新的滑块时，我假设它应该被初始化为预设值，所以它被初始化为全局定义的minValue和maxValue的值。为了确保所有滑块都改变了它们的位置，我在幻灯片函数中添加了$(".slider-range").slider("option", "values", [minValue, maxValue]);。

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();
);

因为，我不确定这是否是您想要的，所以我正在添加一个有效的 fiddle。

【讨论】：

谢谢，这绝对是一个开始！我特别欣赏小提琴。