通过JQuery、JQueryUI和Jsplumb实现拖放模块

前言

因为时间。这个演示只兼容IE8和IE9。其他浏览器目前不支持。然而，jsplumb本身支持各种浏览器。

我写这篇文章是因为我在实际开发中遇到了一个需求，它支持将模块拖放到指定的容器中。每个模块都有自己的输出和输入。我开始感到凉爽和恶心。经过一段时间的研究，我想和大家分享一下结果。请纠正我的缺点。

我看了标题中的三个j。也许有些朋友觉得头晕，需要这么多东西？我来一一介绍。

第一个jquery是我们经常使用的jquery库。它允许你用很少的代码实现一些很酷的js函数(实际上，它封装了很多js)。

第二个JQueryUI提供了一套完整的核心交互插件，UI部分使用了jQuery的风格。造型灵活，视觉效果人性化设计。它可以提供一些流行且令人眼花缭乱的功能。比如说。弹出窗口、日历、拖放、折叠、日历等等。更酷的是，他的css可以定制。我们可以根据自己想要的风格，轻松生成自己想要的风格。你可以通过直接替换主题来改变整个网站的风格。很多人选择jquery ui的更深层次原因是它兼容各种浏览器，支持IE 6.0、Firefox 3、Safari 3.1、Opera 9.6和Google Chrome。

在这里，我们将使用它的一个拖放功能。

详情见http://jqueryui.com/

第三个Jsplumb是一个JS库，它允许您使用箭头和线条来连接UI上的元素。目前的版本是1.3.8。已经是成熟的产品，而且经常更新。当时发现了很多类似的js库。经过调查比较，我决定用它。他的官方网站：http://jsplumb.org/jquery/demo.html

首先，让我谈谈需求。UI左侧是要拖动的模块。我把它从左边拖到右边的容器里。这大概就是下图所描述的。

左边三个表格。我们给他同样的类，方便jquery操作。

div id=' container ' div id=' main content ' div id='侧栏' module Listdiv class=' window ' id=' strong 1/strong br/br//div br/div class=' window ' id=' strong 2/strong br/br//div class=' window ' id=' strong 3/strong br/br//div/div id=' content ' pdrop在此！/p/div/div/div加载页面时，首先使用jquery ui中的可拖动函数，使我们的三个表单可拖动。

因为它们有一个共同的类“窗口”，我们可以这样做：

$('.窗口')。可拖动({ helper : ' clone ' })；助手：克隆意味着我们只是拖出一个这个窗口的副本。如果不添加这个属性。我们会把这张表格拖走。

上面带有id内容的div是我们想要放置表单的目标容器。我们要把这个容器设置成可丢弃的。就是将其标记为可接受的拖动窗口。

$('#content ')。可删除({ })；当内容放入窗口时，会触发拖放事件。我们为drop事件定义了一个函数。

下面代码中的用户界面是当前放入容器中的元素。这里我们做一个判断，如果放入的元素的类包含jq-draggable-outcontainer。也就是说，这个元素是我们从左侧横条拖动的。

首先确定这个元素中的innerText。根据innerText的不同，在右边的表单中渲染一个新的表单。(这里使用innerText并不严格，我只是做个演示。对所有人来说)。

$('#content ').可放下({放下：函数（事件，ui) {//调试器；if(ui。可拖动[0]。类名。indexof(' jq-draggable-outcontainer ')0){ var text=ui。可拖动[0].innerTextswitch(text){ case ' 1 ' : $(this).查找(' p ').追加(' div class=' window jq-draggable-in canner ' id=' window 1 ' strong 1/strong br/br//div div style=' height 3360100 px；/div ')；SBS .UI。查看。普拉姆博。addendpoints(' window 1 '，['BottomCenter']，[])；案例' 2':$(此处)。查找(' p ').追加(' div class=' window jq-draggable-in canner ' id=' window 2 ' strong 2/strong br/br//div div style=' height 3360100 px；/div ')；SBS .UI。查看。普拉姆博。addendpoints(' window 2 '，['BottomCenter '，' BottomLeft']，[' TopCenter '])；}休息案例' 3':$(此处)。查找(' p ').在(“div class=”window jq-draggable-in canner”id=“window 3”strong 3/strong br/br///div)之后；SBS .UI。查看。普拉姆博。addendpoints(' window 3 '，[]，['TopCenter '，' TopLeft '])；}}}});大家注意这个函数SBS .UI。查看。普拉姆博。addendpoints(' window 1 '，['BottomCenter']，[])；它是封装了jsplumb为窗体加上输入和输出的功能。先不管它，一会我们再分析。

现在我们试着拖动一个窗体到右边的容器。可以看到实际已经在右边创建了一个窗体。如下图。

蓝色的圆点就是我们刚才绘画出来的一个输出点。由于我们在上边代码中指定了底部中心。所以这个点被画在了窗子底部的中间。

现在让jsplumb是如何画出来这个点，并且需要哪些初始化过程。

//引用路径=' jquery-1。5 .1-vsdoc。js '/var SBS=SBS | | { }；SBS .用户界面=SBS .UI | | { }；SBS .用户界面。视图=SBS .UI。视图| | { }；SBS .UI。查看。普拉姆博勒={ init : function(){js普拉姆博勒。导入默认值({//默认拖动选项dragonoptions 3360 {光标： '指针'，zIndex: 2000 }，//一端默认为蓝色，另一端默认为绿色endpointstyle 3360[{ fill style : ' # 2255588 ' }，{ fillStyle: '#558822'}，//蓝色端点7像素绿色端点11。端点： [['Dot '，{ radius: 7}]，['Dot '，{ radius: 11}]，//装饰每个连接的覆盖图。请注意，标签覆盖使用函数来生成标签文本；在这种//情况下，它返回我们在下面的“初始化”方法中为每个连接设置的"标签文本"成员connection overlays :[[' Arrow '，{ location: 0.9}]，['Label '，{location: 0.1，id: 'label '，CSS类： ' aLabel ' }]})；var connectionpaintstyle={线宽： 5，strokeStyle: '#deea18 '，joinstyle: 'round'}，//.这是悬停风格connector whistyle={线宽： 7，stroke style : ' # 2e 2a F8 ' }；source endpoint={ endpoint : ' Dot '，paint style : { fill style : ' # 225588 '，radius: 7 }，isSource: true，connector: ['流程图，{ stub 3360 40 }]，连接器样式：连接器油漆样式，悬停绘制连接器样式：连接器绘画样式，连接器样式：目标端点={端点： '矩形'、绘画样式： {填充样式： ' # 558822 '、半径： 11 }，悬停绘画样式：连接器悬停样式、最大连接3360 -1、dropOptions: {悬停类： '悬停'、activeClass: '活动' }、istarget : true }；jsplumble。bind('js普拉姆博连接'，函数(coninfo，originalEvent){ init(coninfo。连接)；});jsplumble。绑定('单击')、函数(连接、原始链接){ if(确认('删除连接从' conn.sourceId '到conn.targetId '？)))jsplumble。分离(连接)；});}，AddEndpoints:函数(toId，sourceAnchors，Targetanchors){ var all source endpoints=[]，all target endpoints=[]；for(var I=0；I source anchors . lengthi){ var source uuid=ToiD source anchors[I]；所有sourceendpoints。push(jsplumble。addendpoint(ToID，sourceEndpoint，{ anchor: sourceAnchors，uuid : source uuid })；} for(var j=0；j target anchors . length j){ var target uuid=ToID target anchors[j]；所有targetendpoints。push(jspLamble。addendpoint(ToID，targetEndpoint，{ anchor: targetAnchors，uuid : TargetUuid })；} } }//页面加载事件$(文档)。就绪(函数(){//所有需要调用页面载入时的Java Script语言都可以放在这里SBS。ui。查看。普拉姆博。init()；});上边的代码是我写的一个调用jsplumb的射流研究…类初始化。函数里初始化了圆点和连接的样式。具体的我们可以查看它的API http://js管道。org/API文档/文件/jquery-js管道-1-3-8-all-js。超文本标记语言

我们主要看添加端点函数。它接收3个参数告诉我，源锚点，目标锚点。

唯一标识符就是我们要在哪个元素上加输入和输出的标记来源锚点。就是输出的点的集合，目标锚就是输入的点的集合。遍历这些点。并且调用jsplumb的方法

jsPlumb.addEndpoint()就可以把这几个点画到元素上去了。

基本的功能就完成了。但是我们新画出来的窗户还不能拖拽。我们要指定这几个窗户是可以拖拽的。

使用框架里的可拖动的为其标记。并指定可以拖拽的范围（局限于我们的内容容器)。如果想限制元素拖拽的范围，只需要设置它的包含属性。

$('.jq-draggable-incontainer ').可拖动({ containment : $(“# content”)).长度？# content ' : ' document ' })；现在这几个窗户可以拖拽了。并且可以使用箭头来连接。

刷新元素

我发现当我拖拽了窗户之后，那几个点是不跟着走的。查了美国石油学会(美国石油协会)找到了一个函数jspLamble。重画一切()；就是重新画所有的东西。

我们可以把它放在可抛弃的的滴事件的最后。

这个演示比较粗糙，因为也处于初步调查阶段。例如，用户将同一个窗口向右拖动两次。会出现错误。因为id是重复的。我们可以遍历id或者保存已经创建的id来创建一个新的id。不过我做了一个懒芳芳，也满足了自己的需求。这是一种只能拖动一次的窗口。我不会让用户第二次拖动它。Jquery提供了一个很好的实现。自动弹回的功能。

当第一次加载页面时，我首先将几个布尔值设置到数据中。当用户拖动窗口一次时，恢复值设置为真。

$(function () {$('#tmpl1 '))。数据(' revert '，false)；$('#tmpl2 ')。数据(' revert '，false)；$('#tmpl3 ')。数据(' revert '，false)；}案例“1”: if($(“# tmpl 1”)。数据(' revert')==true) {$('#tmpl1 ')。可拖动({ revert : ' valid ' })；}else {$(this)。查找(' p ')。追加(' div class=' window jq-draggable-in canner ' id=' window 1 ' strong 1/strong br/br//div div style=' height :100 px；/div ')；SBS。UI . view . plumble . addendpoints(' window 1 '，['BottomCenter']，[])；$('#tmpl1 ')。数据(' revert '，true)；} break源代码下载

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。