指定一个唯一的ID div元素

我正在使用jquery ui创建包含在类名middle-side的div内的可拖动的div。该事件发生在按钮点击触发期间。文本也附加到新创建的div。文本被放置在可拖动div内的<span>标记中。问题是我怎样才能分配一个独特的div id到新创建的可拖动的divs，比如<div id="drag1",<div id="drag2">,<div id="drag3"等。 JSFIDDLE 指定一个唯一的ID div元素

我知道他们是像敲除，棱角等框架，但想坚持我所知道的。

$(".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(); 
});

来源

2014-09-01 Code_Ed_Student

又一个属性添加到您的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/

来源

2014-09-01 16:09:42 John

难道我能够也做ID添加到span标签像'的'可拖动DIV里面？ – 2014-09-01 16:26:32

对于插入的html中的跨度，你可以直接添加一个id：http://jsfiddle.net/5ux25pcn/ – John 2014-09-01 18:33:25

你确定你添加了正确的小提琴吗？我没有看到任何变化 – 2014-09-01 18:39:46

只需创建一个ID，并直接分配给它。无论何时调用uniqueId（），由于计数器是全局的，您将始终得到唯一的一个。

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

例...

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

来源

2014-09-01 16:14:47 Dan

指定一个唯一的ID div元素

回答

相关问题