按+1 NOT x 2复制元素
Duplicating elements by + 1 NOT x 2
http://jsfiddle.net/zRDgK/
我正在构建一个实验性的网页设计应用程序,今天遇到了一个问题。我正在尝试复制我选择的一个元素(通过添加/删除#stylethid-attr(
var MoveSelectedElement = function() {
$('.drawing-area').children().drag("start",function( ev, dd ){
dd.attrc = $( ev.target ).prop("className");
dd.attrd = $( ev.target ).prop("id");
dd.width = $( this ).width();
dd.height = $( this ).height();
})
.drag(function( ev, dd ){
var props = {};
if ( dd.attrc.indexOf("E") > -1 ){
props.width = Math.max( 32, dd.width + dd.deltaX );
}
if ( dd.attrc.indexOf("S") > -1 ){
props.height = Math.max( 32, dd.height + dd.deltaY );
}
if ( dd.attrc.indexOf("W") > -1 ){
props.width = Math.max( 32, dd.width - dd.deltaX );
props.left = dd.originalX + dd.width - props.width;
}
if ( dd.attrc.indexOf("N") > -1 ){
props.height = Math.max( 32, dd.height - dd.deltaY );
props.top = dd.originalY + dd.height - props.height;
}
if ( dd.attrd.indexOf("stylethis") > -1 ){
props.top = dd.offsetY;
props.left = dd.offsetX;
}
$('#stylethis').css( props );
}, {relative:true});
$('.drawing-area *').on('mousedown touchstart', function() {
if(moveable) {
// Add stylethis class
$('div.handle').remove();
$('.drawing-area, .drawing-area *').removeAttr('id');
$(this).attr('id', 'stylethis').append('<div class="handle NE"></div><div class="handle NN"></div><div class="handle NW"></div><div class="handle WW"></div><div class="handle EE"></div><div class="handle SW"></div><div class="handle SS"></div><div class="handle SE"></div>');
}
});
};
这就是我复制元素的方式。
$(".duplicate").on('click touchend', function() {
$('.drawing-area').append($("#stylethis").parent().html());
$('.drawing-area, .drawing-area *').removeAttr('id');
$('div.handle').remove();
MoveSelectedElement();
});
我遇到的问题是,在我第二次复制所选元素后(在已经添加了两个元素之后(,它没有添加1,而是添加了另外两个元素,以此类推,乘以2。我只想将所选元素重复1(因此有了"重复"一词(。我不知道它为什么会这样。
如果有人能帮我解决这个问题,我将不胜感激。
而不是使用
$('.drawing-area').append($("#stylethis").parent().html());
在复制元素的代码中,使用
$('.drawing-area').append($("#stylethis").clone());
您的代码实际上复制了整个.drawing-area
内容,该内容包含所有selectdiv。
小提琴http://jsfiddle.net/zRDgK/1/
相关文章:
- 使用数据属性将HTML数据复制到另一个元素
- 使用javascript代码将HTML元素复制到剪贴板
- 复制要在模式框中显示的父元素
- 复制和修改元素,以便在html文档的另一部分使用它们
- 我想放一个JS函数,它适用于列表的所有元素,但我可以't将其复制到每个元素中
- 复制元素的最佳方式是:只复制元素的类型和属性
- 是否可以将一个DOM元素转换为另一个?或者从中复制所有属性
- 使用jQuery复制元素
- 如何使用getElementByClassName而不是getElementById来复制元素
- 独立于原始元素复制元素
- 动态复制元素 ID
- 使用Javascript复制元素并命名w/counter
- 如何复制元素's事件及其内部HTML
- 如何在 js 数组中复制元素
- jQuery追加复制元素
- 按+1 NOT x 2复制元素
- AngularJS复制元素1秒
- Javascript复制元素值,其中元素名有一个句号
- 复制元素并重复,直到视窗被填满
- 如何在IE7中使用jquery从iframe复制元素到主DOM