很难解释,但我已经建立了一个小便笺应用程序。300pxx300px注释的HTML通过按钮动态插入。然后,可以通过单击便笺中的X来删除便笺。
使用jQueryUI的.draggable()
这是我的jsfiddle演示
https://jsfiddle.net/29gf8wh3/1/
<div id='canvas'>
<div class='note'>
<div id='note_menu'>
<i class="btn_close fas fa-times"></i>
<i class="float-right fas fa-bars"></i>
<textarea class='note_text'></textarea>
</div>
</div>
</div>
注释css
.note {
background-color: #F4F4F0;
-webkit-box-shadow: 10px 10px 39px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 39px -9px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 39px -9px rgba(0, 0, 0, 0.75);
width: 300px;
height: 300px;
}
我的剧本
$(document).ready(function () {
$('.note').draggable();
// Deletes note respective to close button clicked.
$(document).on('click', '.btn_close', function(){
$(this).parent().parent().remove();
});
$('#btn_add').click(function(){
console.log('working');
$('#canvas').add(`<div class='note'>
<div id='note_menu'>
<i class="btn_close fas fa-times"></i>
<i class="float-right fas fa-bars"></i>
<textarea class='note_text'></textarea>
</div>
</div>`).appendTo('#canvas');
$('.note').draggable();
});
});