Clash Royale CLAN TAG

Drag and drop dynamically created elements

I've the below addText function which (coupled with my removeText, which needn't be pasted) works absolutely fine, however I am looking for a way by which the products of the addText function can become drag and drop-able, although I'm honestly not quite sure where the function for this is required (i.e. what it must call/ append etc.). I have been on the lookout for code that answers my question however I seem to only find that which can make already created text drag/drop-able unfortunately.

<div id="planner">
<div class="week week1">
<div class="add">
<h1>Weeks</h1>
<textarea></textarea>
<button type="button" add-text>Add text</button>
<button type="button" remove-text>Undo</button>
</div>
</div>
<div class="week week2">
<div class="add">
<h1>Topics</h1>
<textarea></textarea>
<button type="button" add-text>Add text</button>
<button type="button" remove-text>Undo</button>
</div>
</div></div>



function addText(e) {
let week = e.target.closest('.week'),
area = week ? week.querySelector('textarea') : null,
text = area ? area.value : '';
if (text.length) {
let item = document.createElement('p');
item.innerText = text;
week.appendChild(item);
area.value = '';
}
}


$(document).ready(function() {
$(".add").draggable();
$("body").on("DOMNodeInserted", "*~something~*", makeDraggable);
});

function newDraggableDiv(text) {
$("body").append(
$*~something*
);
}

function makeDraggable() {
$(this).draggable();
}


^This is simply my poor attempt at finding anything worthwhile

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.