jQuery 追加した要素をドラッグ＆ドロップできない

前提・実現したいこと

動的に追加した要素をドラッグ&ドロップできるようにしたいです。
既存にある要素は動かすことができるのですが、動的に追加したものは動きません。
要素(css)は全く同じにしているので動くと思ったのですが...。
どなたかご教示お願いします！

該当のソースコード

JavaScript
1const board = document.getElementById('board');
2const add_btn = document.getElementById('add_btn');
3 
4//付箋を作成
5(function(){
6    add_btn.addEventListener('click', () => {
7        var sticky = document.createElement('div'); 
8        var delete_btn = document.createElement('button');  
9        var text = document.createElement('textarea');
10        sticky.classList.add("sticky");
11        delete_btn.classList.add('delete_btn');
12        text.classList.add('text');    
13        delete_btn.insertAdjacentHTML('afterbegin', "✖︎");
14        sticky.appendChild(delete_btn);
15        sticky.appendChild(text);
16        delete_btn.onclick = function() {
17            board.removeChild(sticky);
18        };
19        board.appendChild(sticky);
20    });
21})()
22
23$(function() {
24$('.sticky').draggable();
25});

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="style.css">
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
9    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
10    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
11    <title>付箋アプリ</title>
12</head>
13<body>
14    <div class="hero">
15        <div class="hero-body">
16            <div class="container">
17                <button id="add_btn">追加</button>
18            </div>
19        </div>
20    </div>
21    <div id="board">
22       
23    </div>    
24    <div class="sticky">
25        <textarea class="text" cols="30" rows="10"></textarea>
26    </div> 
27    <script src="main.js"></script>
28</body>
29</html>