指定一個唯一的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元素

回答

相關問題