CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ari
Ari

Reputation: 6189

Dynamically created DIVs not holding position when other DIVs removed

Hard to explain, but I've built a little sticky note app. The HTML for the 300px by 300px note gets inserted dynamically via a button. You can then delete the note with by clicking an X in the note.

My issue comes when deleting notes. If I create a few notes and move them around the screen, and then delete them one by one, they shift position. The only time they hold the positions ive set them in are when I delete them in reverse order they were created.

Using jQuery UI's .draggable()

Here is my jsfiddle demo https://jsfiddle.net/29gf8wh3/1/

note 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>

note 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;
}

my script

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

Upvotes: 1

Views: 59

Answers (1)

user-9725874
user-9725874

Reputation: 871

use css jQuery position fixed to class note. 

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

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

Upvotes: 2

Related Questions