d3 draggable object example #2 – inline

Introduction
Prerequisites
Procedure
- Load d3 in html <head> element, at the top of .org file
- Create html fragment inline in .org file:

Introduction

This is similar to example #1 (file:../drag1/index.org), except we now demonstrate html + javascript inline in the org-mode-generated html file

.org source for this page is here: file:index-src.org

Prerequisites

As for example #1 (file:../drag1/index.org)

Procedure

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>

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)

2 KiB Raw Permalink Blame History Unescape Escape