时间戳

首页 > 解决方案 > 删除其他 DIV 时动态创建的 DIV 不保持位置

javascript - 删除其他 DIV 时动态创建的 DIV 不保持位置

问题描述

很难解释，但我已经构建了一个小便笺应用程序。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();
});
});

标签： javascriptjqueryhtmlcss

解决方案

使用 css jQuery 位置固定到类注释。

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

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

推荐阅读