draggable jquery etc

имеется ту ду лист, создается заметка, которая в формате li#draggable > p добавляется в ul в колонку PENDING. хочу реализовать drag&drop, чтобы заметки из колонки PENDING можно было перемещать в соседние колонки. перепробовал около 5 различных плагинов, в итоге заметка либо двигается только вверх-вниз (в пределах колонки PENDING), либо не двигается вообще, как в варианте с jquery ui. календарь на jquery ui работает, а drag&drop - нет. ссылка на код https://codepen.io/anon/pen/zdvMXd. и еще вопрос: Jq и ваниллу смешивать законно вообще?

<header>
  <h1>To Do List</h1>
</header>
<section>
  <div class="card">
    <h2>Pending</h2>
    <ul class="list">
          <!--
<li class="draggable" id="yes-drop">
  <p class="title">11</p>
  <p class="date">22</p>
  <p class="descr">33</p>
</li>-->
    </ul>
  </div>
  <div class="card">
    <h2>In Progress</h2>
  </div>
  <div class="card">
    <h2>Completed</h2>
  </div>
  <div class="card addTask">
    <h2>Add a task</h2>
    <form action="">
      <input id="title" type="text" placeholder='Title'>
      <br>
      <textarea name="#" id="description" cols="#" rows="7" placeholder="Description"></textarea>
      <br>
      <input type="text" id="datepicker" placeholder="Due Date (dd/mm/yyyy)">
      <br>
      <button class="add">Add Task</button>
      <button class="clearData">Clear Data</button>
      <div class="delete">
        <p>Drag here to delete</p>
      </div>
    </form>
  </div>
</section>
$(function () {
  $("#datepicker").datepicker();
  $("#draggable").draggable();
});  
var add = document.querySelector('.add');
  function a(e) {
    e.preventDefault();
    function id(el) {
      return document.getElementById(el);
    }
    var title = id('title').value;
    var description = id('description').value;
    var date = id('datepicker').value;
    function crEl(el) {
      return document.createElement(el);
    }
    var list = document.querySelector('.list');
    var li = crEl('li');
    li.setAttribute('id', 'draggable');
    var createTitle = crEl('p');
    createTitle.setAttribute('class', 'title');
    var createDate = crEl('p');
    createDate.setAttribute('class', 'date');
    var createDescr = crEl('p');
    createDescr.setAttribute('class', 'descr');
    function tNode(el) {
      return document.createTextNode(el);
    }
    var tt = tNode(title);
    var dsc = tNode(description);
    var dt = tNode(date);
    function aChild(inner, outter) {
      return inner.appendChild(outter);
    }
    aChild(createTitle, tt);
    aChild(createDescr, dsc);
    aChild(createDate, dt);
    function liChild(inner, outter1, outter2, outter3) {
      return {
        a: inner.appendChild(outter1),
        b: inner.appendChild(outter2),
        c: inner.appendChild(outter3)
      }
    }
    liChild(li, createTitle, createDate, createDescr);
    aChild(list, li);
  }
  add.addEventListener('click', a);