d3 draggable object example #2 – inline
Table of Contents
1. Introduction
This is similar to example #1 (../drag1/index.html), except we now demonstrate html + javascript inline in the org-mode-generated html file
.orgsource for this page is here: index-src.html
2. Prerequisites
As for example #1 (../drag1/index.html)
3. Procedure
3.1. Load d3 in html <head> element, at the top of .org file
#+html_head: <script type="text/javascript" src="/ext/d3/d3.js"></script> #+html_head: <script type="text/javascript" src="drag-example.js"></script>
3.2. Create html fragment inline in .org file:
This causes frame to appear when this document finishes loading, (so it should likely already be present :-)
#+begin_export html
<div id="frame" style="border: 1px solid blue"></div>
<script type="text/javascript">
window.onload = function() { ex.start(this); }
</script>
#+end_export
(box with draggable circle appears below if-and-only-if publishing to html)