За последние 24 часа нас посетили 16739 программистов и 1694 робота. Сейчас ищут 868 программистов ...

jsplumd соеденить объекты

Тема в разделе "JavaScript и AJAX", создана пользователем faraday, 15 мар 2012.

  1. faraday

    faraday Активный пользователь

    С нами с:
    20 ноя 2011
    Сообщения:
    20
    Симпатии:
    0
    Привет,форум. Есть два дива, перетаскиываемые draggable , задача стоит в соединении их линией, для отображения связи. как это можно сделать?
    наткнуля на плагин jsPlumb http://jsplumb.org/doc/usage.html , третий день пытаюсь заставиь этот код работать:
    Код (Text):
    1. <!doctype html>
    2. <html>
    3.     <head>
    4.         <title>jsPlumb 1.3.7 demo - jQuery</title>
    5.         <meta http-equiv="content-type" content="text/html;charset=utf-8" />           
    6.     </head>
    7. <style>
    8. .div{
    9. width:150px;
    10. background:gray;
    11. border:1px black solid;
    12. margin:20px;
    13. height:50px;
    14. cursor:move;
    15. }
    16. </style>
    17.  
    18.     <body>
    19.             <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'>
    20.             </script><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
    21.             <script type='text/javascript' src='http://jsplumb.org/js/jquery.jsPlumb-1.3.7-all-min.js'></script>
    22.      
    23.    
    24.         <div style="position:absolute">
    25.             <div id="demo">
    26.                 <div class="div" id="window1"><strong>Window 1</strong><br/><br/></div>
    27.                 <div class="div" id="window2"><strong>Window 2</strong><br/><br/></div>
    28.                 <div class="div" id="window3"><strong>Window 3</strong><br/><br/></div>
    29.                 <div class="div" id="window4"><strong>Window 4</strong><br/><br/></div>
    30.                 <div class="div" id="window5"><strong>Window 5</strong><br/><br/>.</div>
    31.                 <div class="div" id="window6"><strong>Window 6</strong><br/><br/></div>
    32.                 <div class="div" id="window7"><strong>Window 7</strong><br/><br/></div>
    33.             </div>
    34.          </div>
    35.            <script type="text/javascript">
    36.            $('.div').draggable();
    37.             var connection1 = jsPlumb.connect({
    38.                 source:"window1",
    39.                 target:"window2"
    40.                 });
    41.         </script>
    42.  
    43.          
    44.       </body>
    45.      </html>