JqueryUI滑塊與Sortable衝突

我試圖用不同類型的輸入創建一個拖放表單。選擇，文本框和廣播框工作正常，但是當拖入可排序字段時，Range Slider不起作用。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();

來源

2014-03-26 Mayowa

嘗試初始化您的滑塊時，它被刪除。 –

@ReCaptcha如果你不介意，你如何去做？ – Mayowa

創建一個函數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(); 
    } 
});

以便每次初始化一個新的滑塊時，應initailised到預設值，我假設，所以它初始化爲的全局值定義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。

來源

2014-03-28 08:09:39

感謝這絕對是一個開始！我特別欣賞小提琴。 – Mayowa

JqueryUI滑塊與Sortable衝突

回答

相關問題