Question

我有一个javascript代码，所以当用户按下按钮时，会创建一个div的克隆。代码工作正常，但它没有复制div的属性，所以如果原始div具有css属性，div克隆将不具有属性。那么有没有办法完全复制div甚至它的功能。

$(function() {
$('.button').on('click', function(){
    $('.note:first').clone().draggable().appendTo('body');
});


});

.note {
width: 280px;
height: 100px;
padding-top: 40px;
margin-top: 60px;
margin-left: 35px;
word-break: break-word;
font-family: Note;
font-size: 30px;
background-image: url("images/stickynote.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}

.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}


.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}

.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}

.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML
<div class="note" contenteditable="true">
<span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
    <img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select
</div>

<a href='#' class='button'>Create Note</a>

Answer 1

您可以克隆div，将其添加到DOM，然后使其可拖动：

   var newobj = $('.note:first').clone();
// change the id, if needed        
//$(newobj).attr("id","newId");
        $("body").append(newobj);
        $(newobj).draggable();

这是一个jsfiddle示例： http://jsfiddle.net/bogtan8y/

希望有所帮助

Answer 2

使用insertAfter jquery函数

$(function() {
$('.button').on('click', function(e){
e.preventDefault();
var test = $('div.note:first').clone();
$(test).insertAfter("div.note:last");
});
});

我可以修改我的按钮onclick脚本

2 个答案: