How to use danvk re-orderable columns with dynamically created tables?

I'm trying to implement the danvk draggable table Javascript, an开发者_如何学运维d while I've been successful using it for tables actually in the html source, when I try to use it with tables I'm creating in Javascript code, it isn't applied to those tables.

Has anyone had the same issue?

---

All you need to do is invoke dragtable.makeDraggable(tableElement);​​​ on a table dom node after it has been injected.

Consider the following example code:

HTML

​<div id="tableDiv"></div>

JavaScript (the last line here is the crucial one)

var tableStr = '<table id="table" class="draggable" border="1"><tr><th>Name</th><th>Date</th><th>Color</th></tr><tr><td>Dan</td><td>1984-07-12</td><td>Blue</td></tr><tr><td>Alice</td><td>1980-07-22</td><td>Green</td></tr><tr><td>Ryan</td><td>1990-09-23</td><td>Orange</td></tr><tr><td>Bob</td><td>1966-04-21</td><td>Red</td></tr></table>',
    tableDiv = document.getElementById('tableDiv'),
    table;
tableDiv.innerHTML = tableStr;
table = document.getElementById('table');
dragtable.makeDraggable(table);​​​

Check out a working demo of this code here.