2016-01-24 68 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