[Python] jquery in display function of a python notebook

Is there a way to run jQuery in a display function called in a python notebook ? I am looking to be able to organize (sort) some div produced and displayed in a notebook.

The static js+html version works. Not from a notebook.

import matplotlib.pyplot as plt
import numpy as np
from IPython.display import HTML, display

width = 300
height = 200
dpi = 100


# Create images
for i in range(5):
filePNG = 'image_%02d.png' %(i+1)
fig = plt.figure(figsize=(width/dpi, height/dpi), dpi=dpi)
plt.plot(np.random.rand(10))
plt.ylabel('some numbers')
plt.savefig(filePNG)
plt.close(fig)

# Display
html_code = ''
for i in range(5):
filePNG = 'image_%02d.png' %(i+1)
html_code += '''
<div style='float: left; border: 1px solid lightgray;'>
<img style='width: 100%%;' src='%s' />
</div>
''' % (filePNG)
js_code = '''
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<script>
$( function() {
$("#sortable").sortable();
});
</script>
'''

display(HTML(js_code + '<div id="sortable">' + html_code + '</div>'))



As written the same code works from an html page. For info: https://jqueryui.com/sortable/

Is it feasible with a ipywidget output ?

Continue reading...