动态创建的 DIV 在移除其他 DIV 时不保持位置

Question

很难解释，但我构建了一个小小的便笺应用程序。300px x 300px 注释的 HTML 通过按钮动态插入。然后，您可以通过单击注释中的 X 来删除注释。

删除笔记时出现了我的问题。如果我创建一些笔记并在屏幕上移动它们，然后一个接一个地删除它们，它们就会改变位置。他们唯一一次持有我设置的位置是当我以相反的顺序删除它们时。

使用 jQuery UI 的 .draggable((

这是我的 jsfiddle 演示 https://jsfiddle.net/29gf8wh3/1/

注释 HTML

<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();
});
});

Answer 1

使用固定在类注释上的css jQuery位置。

$('.note').draggable();
$('.note').css('position','fixed');

https://codepen.io/anon/pen/XxJyBj