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.