Why the div that is appearing with click event dose not able to be dragged?

Question

I am stuck on the problem where I am able to get DIV with the help of JavaScript but that does not able to drag. The code for drag is working perfectly fine but it will not work when I get the same code on click event.

I have another confusion mas well, when I refresh the page all notes that I have called with the help of JavaScript will be gone. What should I do about that as well?

JavaScript:

$(function () {
    $(".draggable-js").draggable({
        containment : 'parent',
        handle: "p",
        start: function (event, ui) {
            $(this).css('background-color', 'rgb(221, 251, 120);');
        },
        stop: function (event, ui) {
            $(this).css('background-color', 'rgb(227, 250, 150)');
        }
    });
    $("div, p").disableSelection();
});

$(document).ready(function() {
    var wrapper = $(".wrap");
    var add_button = $(".add-note");

    $(add_button).click(function(e) {
        e.preventDefault();
        {
            $(wrapper).append('<div id="draggable" class="ui-widget-content draggable-js"><div id="draggable-header"><p class="ui-widget-header">Note name</p></div><div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div></div> '); //add new note
        }
    });

    $(wrapper).on("click", ".delete-note", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
    })
});

CSS:

.wrap {
    width: 77vw;
    height: 87vh;
}

#draggable{
    width: 300px;
    height: 300px;
    position: absolute;
    background: rgb(227, 250, 150);
    border: none;
    border-radius: 5px 5px 0px 0px;
}

#draggable p {
    cursor: move;
}

#draggable-header p{
    background: rgb(80, 80, 80);
    height: 30px;
    width: 300px;
    color: white;
    font-weight: 500;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
}

#draggable textarea{
    background: transparent;
    resize: none;
    padding: 5px;
    padding-left: 10px;
    width: 300px;
    height: 300px;
    border: none;
    font-weight: 500;
}

HTML:

<div class="wrap">
     <div id="draggable" class="ui-widget-content draggable-js">
          <div id="draggable-header">
               <p class="ui-widget-header">Note name</p>
          </div>
     </div>
     <div>
          <textarea placeholder="Message" id="w3review" class="ui-widget-header"
                       name="w3review" rows="1" cols="2"></textarea>
     </div>

     <!-- The code is coming here perfectly but not able to drag as expected. -->

</div>

Answer 1

$(document).ready(function(e) {
$(function () {
    $(".draggable-js").draggable({
        containment : 'parent',
        handle: "p",
        start: function (event, ui) {
            $(this).css('background-color', 'rgb(221, 251, 120);');
        },
        stop: function (event, ui) {
            $(this).css('background-color', 'rgb(227, 250, 150)');
        }
    });
    $("div, p").disableSelection();
});
})

$(document).ready(function() {
    var wrapper = $(".wrap");
    var add_button = $(".add-note");

    $(add_button).click(function(e) {
        e.preventDefault();
        {
            $(wrapper).append('<div id="draggable" class="ui-widget-content draggable-js"><div id="draggable-header"><p class="ui-widget-header">Note name</p></div><div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div></div> '); //add new note
        }
         $(".draggable-js").draggable(); 
    });

    $(wrapper).on("click", ".delete-note", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
    })
});

.wrap {
    width: 77vw;
    height: 87vh;
}

#draggable{
    width: 300px;
    height: 300px;
    position: absolute;
    background: rgb(227, 250, 150);
    border: none;
    border-radius: 5px 5px 0px 0px;
}

#draggable p {
    cursor: move;
}

#draggable-header p{
    background: rgb(80, 80, 80);
    height: 30px;
    width: 300px;
    color: white;
    font-weight: 500;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
}

#draggable textarea{
    background: transparent;
    resize: none;
    padding: 5px;
    padding-left: 10px;
    width: 300px;
    height: 300px;
    border: none;
    font-weight: 500;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
<div class="wrap">
     <div id="draggable" class="ui-widget-content draggable-js">
          <div id="draggable-header">
               <p class="ui-widget-header">Note name</p>
          </div>
     </div>
     <div>
          <textarea placeholder="Message" id="w3review" class="ui-widget-header"
                       name="w3review" rows="1" cols="2"></textarea>
     </div>

     <!-- The code is coming here perfectly but not able to drag as expected. -->

</div>

<button class="add-note">add-note</button>

1. Dynamically created element cannot be draggable

you can re initialize draggable to the element newly created by JS,$(".draggable-js").draggable();

2. when I refresh the page all notes that I have called with the help of JavaScript will be gone.

this is because the browser won't save the temporarily created element, so as soon as make refresh the all temporary data will get erased, so you're not able to get the previous notes, refer this answer for know more about how can you achieve it.

Answer 2

The problem is that you run the draggable event then it will only bind to those elements that exist right now.

I've made your draggable into an function and now you can run it every time you do the add click.

function r() {
  $(".draggable-js:not(.ui-draggable)").draggable({
    containment: 'parent',
    handle: "p",
    start: function(event, ui) {
      $(this).css('background-color', 'rgb(221, 251, 120);');
    },
    stop: function(event, ui) {
      $(this).css('background-color', 'rgb(227, 250, 150)');
    }
  });
  $("div, p").disableSelection();
};

Note

Please note that when you click on the add-note you are duplication ID, and an Id should always be unique.

Demo

function r() {
  $(".draggable-js:not(.ui-draggable)").draggable({
    containment: 'parent',
    handle: "p",
    start: function(event, ui) {
      $(this).css('background-color', 'rgb(221, 251, 120);');
    },
    stop: function(event, ui) {
      $(this).css('background-color', 'rgb(227, 250, 150)');
    }
  });
  $("div, p").disableSelection();
};

$(document).ready(function() {
  var wrapper = $(".wrap");
  var add_button = $(".add-note");

  $(add_button).click(function(e) {
    e.preventDefault(); {
      $(wrapper).append('<div id="draggable" class="ui-widget-content draggable-js"><div id="draggable-header"><p class="ui-widget-header">Note name</p></div><div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div></div> '); //add new note
    }
    r();
  });
  r();
  $(wrapper).on("click", ".delete-note", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
  })
});

.wrap {
  width: 77vw;
  height: 87vh;
}

#draggable {
  width: 300px;
  height: 300px;
  position: absolute;
  background: rgb(227, 250, 150);
  border: none;
  border-radius: 5px 5px 0px 0px;
}

#draggable p {
  cursor: move;
}

#draggable-header p {
  background: rgb(80, 80, 80);
  height: 30px;
  width: 300px;
  color: white;
  font-weight: 500;
  padding: 5px;
  border-radius: 5px 5px 0px 0px;
}

#draggable textarea {
  background: transparent;
  resize: none;
  padding: 5px;
  padding-left: 10px;
  width: 300px;
  height: 300px;
  border: none;
  font-weight: 500;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<div class="wrap">
  <div id="draggable" class="ui-widget-content draggable-js">
    <div id="draggable-header">
      <p class="ui-widget-header">Note name</p>
    </div>
    <div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div>
  </div>


</div>
<button class="add-note">add-note</button>