写这篇文章是因为我在实际开发中遇到一个需求，支持拖拽模块到指定的容器里。并且每个模块会有自己的output 和input。开始觉得很酷也很变态。经过一段时间的调研，特把结果分享给大家。不足之处，敬请指正。
看了题目里的3个J。可能有的朋友觉得头晕，需要这么多东东？我先逐一介绍一下。
第一个jquery是我们平时经常使用的jquery 库。它可以让你用很少的代码实现一些很酷的js功能（实际它封装了很多js）。
第二个JQueryUI提供了一整套核心交互插件，UI部分用jQuery的风格。灵活的造型，人性化设计的视觉效果。可以提供一些常用的很炫的功能。比如。弹出窗，日历，拖拽，折叠，日历等等。更酷的他的css是可以定制的。我们可以根据自己想要的风格很轻松的生成自己想要的样式。直接替换theme就可以改变整个站点的风格。很多人选择jquery ui的更深一层原因是，它对各个浏览器兼容性很好，支持 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+和Google Chrome。
在这里，我们会用到一个它其中的drag and drop（拖拽）功能。
第三个Jsplumb 是一个允许里使用箭头，线去连接UI上的元素的JS库。目前的版本是1.3.8。已经是一个成熟的产品，并且经常更新。我当时查到了很多类似的js库。调研比较之后决定使用它。他的官方网站：
首先我还是说说需求。UI左边是待拖拽的模块。我从左边把它拖拽到右边的容器里。大概就是下图描述的样子。
左边三个窗体。我们给他同一的class ，方便jquery来操作。
<div> <div> <div> Module List <div> <strong>1</strong><br /> <br /> </div> <br /> <div> <strong>2</strong><br /> <br /> </div> <div> <strong>3</strong><br /> <br /> </div> </div> <div> <p>drop here!</p> </div> </div> </div
在页面载入时，首先使用jquery ui里的draggable功能使得我们的3个窗体变为可以拖动的。
因为他们有共同的class “window”，我们可以这样：
$(".window").draggable({ helper: "clone" });
helper：clone的意思是我们只是拖出这个window的副本。如果不加这个属性。我们就会把这个窗体拖走了。
上边id为content的div就是我们要放置窗体的目标容器。我们要把这个容器设置为droppable。就是标记它为可以接受拽过来的window。
$("#content").droppable({});
当content 被放入window的时候会触发drop事件。我们为drop事件定义一个function。
下边代码中入参的ui就是当前被drop进容器的元素。这里我们做一个判断，如果被放进来的元素的class包含jq-draggable-outcontainer。也就是说，这个元素是我们从左边siderbar拽过来的话。
首先判断这个元素中的innerText。根据innerText的不同在右边的窗体中render一个新的窗体。（这里使用innerText判断是不严谨的，我只是做一个demo。为大家抛砖引玉）。
$("#content").droppable({ drop: function (event, ui) { // debugger; if (ui.draggable[0].className.indexOf("jq-draggable-outcontainer") > 0) { var text = ui.draggable[0].innerText switch (text) { case "1": $(this) .find("p") .append('<div><strong>1</strong><br /><br /></div><div></div>'); SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []); case "2": $(this) .find("p") .append('<div><strong>2</strong><br /><br /></div><div></div>'); SBS.UI.Views.Plumb.AddEndpoints("window2", ["BottomCenter","BottomLeft"], ["TopCenter"]); } break; case "3": $(this) .find("p") .after('<div><strong>3</strong><br /><br /></div>'); SBS.UI.Views.Plumb.AddEndpoints("window3", [], ["TopCenter", "TopLeft"]); } } } });
大家注意这个函数SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);它是封装了jsplumb 为窗体加上输入和输出的功能。先不管它，一会我们再分析。
现在我们试着拖动一个窗体到右边的容器。可以看到实际已经在右边创建了一个窗体。如下图。
蓝色的圆点就是我们刚才绘画出来的一个output点。由于我们在上边代码中指定了BottomCenter。所以这个点被画在了windows底部的中间。
现在让jsplumb是如何画出来这个点，并且需要哪些初始化过程。