如何在可拖动和可拖放之间画一条线？

我正在使用优秀的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)); }); });

我得到这个：

替代文字

我真正想要的是（如果可能的话）在Elsa和Kjell之间build立一条线，这样就可以清楚地表明它们之间的联系。

我总是可以用箱子里面的数字来做，但我真的很想知道如何使用这些线条来做到这一点。

谢谢 。

  • 更新（08.Jul.2013）更新最新版本的图书馆; html重构使用JsRender;
  • 更新（2011年9月29日）新增GIT回购; 清理代码; 更新到最新的框架版本;
  • 更新（2013年3月3日）与工作示例的固定链接;

当前的例子使用：

  • HTML 5文档types
  • jQuery v.1.10.2
  • jQuery UI v.1.10.3
  • Raphael v.2.0.1
  • JsRender v.1pre35 （可选，用于HTML简化）

资源

Git Repository中的源代码

演示

JSBIN的页面演示

适用于FF ， IE ， Chrome ， Safari和Opera 。

testing：

  • Firefox 6和7 .. 22
  • IE 8和9 .. 10
  • Chrome 12+ .. 27
  • Safari 5+ .. 6
  • 歌剧11.51 .. 15

向大家展示，我只是做了一个小小的演示（我今天是一个骄傲的人）：

video演示

和一个小图片：

替代文字

我太新，发布链接，但如果你谷歌“图书馆的简单绘图与jQuery”，你可能会发现你在找什么。 🙂

链接在这里

Interesting Posts