如何用JQuery、JQueryUI和Jsplumb打造长尾词拖拽功能？

本文共计2112个文字，预计阅读时间需要9分钟。

前言：由于时间的原因。

本demo仅兼容IE8、IE9。其他浏览器暂时不支持。

不过jsplumb本身是支持各种浏览器的。

写这篇文档是因为我在实际开发中遇到一个需求，支持拖拽模块到指定的容器。

前言

由于时间的原因。这个demo只兼容IE8，IE9。其他浏览器暂时不支持。不过jsplumb本身是支持各种浏览器的。

写这篇文章是因为我在实际开发中遇到一个需求，支持拖拽模块到指定的容器里。并且每个模块会有自己的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（拖拽）功能。