JQuery UI 拖放 - 添加随机数答案

【问题标题】：JQuery UI Drag and Drop - add random numberJQuery UI 拖放 - 添加随机数
【发布时间】：2016-01-24 16:52:00
【问题描述】：

我有一个表单的拖放功能。这一切都很好，但我在使用 datepicker 的 dateinput 时遇到问题。我基本上需要确保删除的每个 datepicker 元素都有一个唯一的 id。这是拖放的示例

$(".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，但如果我这样做了，什么都不会应用。

我怎样才能让它发挥作用？谢谢

【问题讨论】：

标签： jquery jquery-ui datepicker drag-and-drop

【解决方案1】：

您可以生成一个随机的id，该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

【讨论】：