在按钮单击事件上,将创建一个新div。用户可以创建尽可能多的div。创建div
后,由于jqueryui可拖动PLUGIN的帮助,它变得可拖动。我已经设置了另一个单击按钮事件,删除创建的div。问题是,当点击用户点击删除按钮时,它会删除所有div。如何在每个div
附加一个专门删除该div的按钮? JSFIDDLE
Jquery的
/** Remove newly created div **/
$(".remove").click(function(){
$(".draggable").remove();
});
var z = 1;
$('#button').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'draggable ui-widget-content',
text: $('textarea').val(),
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'});
})
});
HTML
<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea><br/>
<input type="button" id="button" value="Add Div with Text" />
<button class="remove">Remove div</button><br/>
<div>
<div class="middle-side empty"></div>
</div>
答案 0 :(得分:7)
将text
属性设置为html
:
html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
然后为click
元素编写.close
个事件:
$('body').on('click', '.draggable .close', function () {
$(this).closest('.draggable').remove();
});
答案 1 :(得分:1)
修改您的添加Div按钮和删除按钮事件,如下所示:
$(".remove").click(function(){
$(".currentDiv").remove();
});
var z = 1;
$('#button').click(function (e) {
$(".currentDiv").removeClass("currentDiv");
/** Make div draggable **/
$('<div />', {
class: 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
},
drag: function() {
$(".currentDiv").removeClass("currentDiv");
$(this).addClass("currentDiv");
},
}
}).addClass('placement currentDiv');
以这种方式创建新div时,所有currentDiv
类都会在此行中删除:
$(".currentDiv").removeClass("currentDiv");
然后在最后一行的创建div中添加currentDiv
类。所以最后创建的div总是有currentDiv
类。
然后在JS的末尾添加这个块:
$('body').on('click', '.draggable', function () {
$(".currentDiv").removeClass("currentDiv");
$(this).addClass("currentDiv");
});
上面的块导致当你点击每个可拖动元素时,它被选为当前div,所以删除按钮,删除它。
<强> Check JSFiddle Demo 强>
在演示中,我还为currentDiv添加了背景颜色:红色,你可以删除它。
答案 2 :(得分:0)
您可以在draggable
事件后添加此内容:
var closeBtn = '<a href="#xcv" onclick="$(this).unwrap();$(this).remove();" >close</a>';
$('.placement').append(closeBtn);