如何在可拖動和可拖放之間畫線？

Question

我正在使用優秀的JQuery UI來進行「映射」，因此用戶可以將一個程序中的人員映射到其他程序中的人員。

使用這個簡單的jQuery：

$(document).ready(function() { 
    $("div .draggable").draggable({ 
     revert: 'valid', 
     snap: false 
    }); 

    $("div .droppable").droppable({ 
     hoverClass: 'ui-state-hover', 
     helper: 'clone', 
     cursor: 'move', 
     drop: function(event, ui) { 
      $(this) 
       .addClass('ui-state-highlight') 
       .find("img") 
       .removeAttr("src") 
       .attr("src", "_assets/img/icons/check-user-48x48.png"); 

      $(this).droppable('disable'); 

      $(ui.draggable) 
       .addClass('ui-state-highlight') 
       .find("img") 
       .removeAttr("src") 
       .attr("src", "_assets/img/icons/check-user-48x48.png"); 

      $(ui.draggable).draggable('disable'); 
     } 
    }); 

    $("div .droppable").bind("dblclick", function() { 
     $(this) 
      .removeClass('ui-state-highlight') 
      .find("img") 
      .removeAttr("src") 
      .attr("src", "_assets/img/icons/user-48x48.png"); 
     $(this).droppable('enable'); 

     EnableSource($(this)); 
    }); 
}); 

我得到這個：

我真正想要的是（如果可能）創建 之間的線艾爾莎和Kjell所以它使得它們之間的連接清晰。

我總是可以用箱子裏面的數字來做它，但我真的想要知道如何使用這些線條來做到這一點。

謝謝。

Answer 1

• updated（08.Jul.2013）更新了最新版本的庫; html重構使用JsRender;
• updated（29.Sep.2011）添加了GIT Repo;清理了代碼;更新到最新的框架版本;
• 已更新（2013年3月3日）固定鏈接與工作示例;

當前示例使用：

• HTML 5 DOCTYPE
• jQuery v.1.10.2
• jQuery UI v.1.10.3
• Raphael v.2.0.1
• JsRender v.1pre35 （可選，用於HTML簡化）

源

Source code in Git Repository

演示

Page demo at JSBIN

---

件

作品上FF，IE，鉻，的Safari和歌劇。

上測試：

• 火狐6和7 .. 22
• IE 8和9。10
• 鉻12+ .. 27
• Safari 5以上。6
• Opera 11.51 .. 15

向你展示所有，我只是做了一個小小的演示我的成就（我是一個驕傲的兒子今天）：

Video demo

，有點像：

Answer 2

我太新張貼一個鏈接，但如果你谷歌「庫進行簡單畫圖與jQuery「，你可能會發現你在找什麼。 :)

link here