Есть простой, но полезный пример jquery.JsPlumb?

На прошлой неделе я искал некоторую графическую библиотеку javascript-библиотеки, и я наткнулся на jsPlumb, который судя по примерам, которые я видел, самую перспективную и самую передовую библиотеку, которую я видел до сих пор. Документация является довольно большой, не очень полезной, поскольку я не могу понять, как выполнять самые важные задачи.

В моем списке вопросов:

Как сообщить графику использовать предопределенные элементы DOM-дерева?
Какая часть этих элементов будет отображаться?
В то время как создание соединений легко, как определить выравнивание?

В то время как эти вопросы остаются, есть несколько примеров, но либо они должны быть удобными для использования (см. пример 1), либо они настолько сложны, что даже извлекают (ну, загрузка не является проблемой, но Я действительно не хочу анализировать все, прежде чем играть с какой-то библиотекой...) код, по крайней мере, для меня невозможно (см. https://github.com/sporritt/jsPlumb/tree/master/demo).

Пример 1

 <head>
  <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
  </script>
  <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js">
  </script>
  <script type="text/javascript" 
     src="PATH_TO/jquery.jsPlumb-1.3.15-all-min.js ">
  </script>
  <script type="text/javascript">
     jsPlumb.bind("ready", function() {
        var e0 = jsPlumb.addEndpoint("container0"),
        e1 = jsPlumb.addEndpoint("container1");

        jsPlumb.connect({ source:e0, target:e1 });
     });
 </script>
 </head>
 <body>
   <div id="container0">
   </div>
   <div id="container1">
   </div>
 </body>

В результате

Может ли кто-нибудь дать мне пример, который отвечает на мои вопросы?

Спасибо заранее.

Ответ 1

Попробуйте добавить это непосредственно перед тегом закрывающей головки...

<style type="text/css">
    #container0, #container1 {
        float: left;
        height: 100px;
        width: 100px;
        border: 1px solid black;
        margin: 10px;
    }
</style>

Ответ 2

Нет ничего плохого в том, что у вас там есть, но ваши divs не имеют стиля и не расположены.

Я бы предложил установить их абсолютным, дать им каждый верх/левый и, возможно, границу, и вы увидите что-то более полезное.