按+1 NOT x 2复制元素

Duplicating elements by + 1 NOT x 2

本文关键字:复制 元素 NOT      更新时间:2023-09-26

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/