2016-01-24 67 views
0

我有一個窗體的拖放功能。這一切都很好,但我使用datepicker dateinput有問題。我基本上需要確保每個被刪除的datepicker元素都有一個唯一的id。這是拖放的一個例子JQuery UI拖放 - 添加隨機數

$(".component").draggable({ 
    helper: function() { 
     return $(this).clone().addClass("component-drag"); 
    } 
}).on("click", function() { 
    a.addComponent($(this)); 
}), 
$("#content").droppable({ 
    accept: ".component", 
    hoverClass: "content-hover", 
    drop: function(b, c) { 
     a.addComponent(c.draggable) 
    } 
}) 

無論發生什麼,一旦組件被刪除,就會調用addComponent函數。目前,這看起來像以下

addComponent: function(a) { 
    var input = a.find('input'); 
    var i = Math.floor((Math.random() * 1000) + 1); 
    if(input.attr('id') == 'dateInput') { 
     input.datepicker("destroy").removeClass('hasDatepicker'); 
     input.attr("id",'dateInput' + i).datepicker(); 
    } 
    a.clone().removeClass("component").addClass("element").removeAttr("id").prepend('<div class="close">&times;</div>').appendTo("#content"), $("#options_modal").modal("hide"); 
}, 

所以我檢查,看看拖動組件是否是一個dateInput。如果是,我首先銷燬它的所有原始日期選擇器代碼。然後我生成一個隨機數並將其添加到其id屬性。這種工作,但所有dateInputs使用相同的數字。因此,如果我拖動兩個dateInput元素,它們都具有相同的ID。

我想我需要在克隆後添加id,但如果我這樣做,沒有任何應用。

我該如何着手解決這個問題? 感謝

回答

1

您可以生成一個隨機id不沿着以下存在:

var inputs = $('#content').find('[id^=["dateInput"]'); 
var existing = inputs.map(function(i,input) { 
    return this.id.split('dateInput')[1]; 
}).get(); 

var random; 
do { 
    random = Math.random() * 1001; // n + 1 
} while (array.indexOf(random)>=0); 

// use random to generate id here