javascript - 当其他 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