Question

我正在使用jquery ui来创建包含在类名middle-side的div中的可拖动div。该事件发生在按钮单击触发器期间。文本也附加到新创建的div。文本放在可拖动div中的<span>标记中。问题是我如何为新创建的可拖动div分配一个唯一的div id，如<div id="drag1"，<div id="drag2">，<div id="drag3"等？ JSFIDDLE

我知道他们是淘汰赛，角球等框架，但我想坚持我所知道的。

$(".remove").click(function(){
    $(".draggable").remove();
});

var z = 1;
$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement');


    /** Contain draggable div **/
    $('.middle-side').parent().mousemove(function(e){
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
    })

});

/** Place a temporary dashed border on div after initial creation**/
$('.middle-side').on('click', function(e){
    var offset = $(this).offset();
    var relX = e.pageX - offset.left;
    var relY = e.pageY - offset.top;
    $('.placement').css({'top': relY,'left': relX, 'position': 'absolute' });
    $(this).off("mousemove").find('.placement').removeClass('placement')    
}); 

$('body').on('click', '.draggable .close', function () {
    $(this).closest('.draggable').remove();
});

Answer 1

只需将另一个属性添加到 div 元素：

var z = 1,
    id = 1;
$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        id : "drag" + id++,
        class: 'draggable ui-widget-content',
        html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement');

我还更新了你的小提琴：http://jsfiddle.net/0wbnud4k/48/

Answer 2

只需创建一个ID并直接指定它。无论何时调用uniqueId（），您都将获得一个唯一的，因为计数器是全局的。

var counter = 0;
var triggerclick = false;
uniqueId = function(){
    return 'drag' + counter++
}

示例...

$( myDiv ).attr( "id", uniqueId());

为div元素分配唯一的id

2 个答案: