<强>前言
由于时间的原因。这个演示只兼容IE8, IE9。其他浏览器暂时不支持。不过jsplumb本身是支持各种浏览器的。
写这篇文章是因为我在实际开发中遇到一个需求,支持拖拽模块到指定的容器里。并且每个模块会有自己的输出和输入。开始觉得很酷也很变态。经过一段时间的调研,特把结果分享给大家。不足之处,敬请指正。
看了题目里的3个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是一个允许里使用箭头,线去连接UI上的元素的JS库。目前的版本是1.3.8。已经是一个成熟的产品,并且经常更新。我当时查到了很多类似的JS库。调研比较之后决定使用它。他的官方网站:http://jsplumb.org/jquery/demo.html
首先我还是说说需求。ui左边是待拖拽的模块。我从左边把它拖拽到右边的容器里。大概就是下图描述的样子。
左边三个窗体。我们给他同一的课,方便jquery来操作。
& lt; div id=叭萜鳌北?
& lt; div id=癿ainContent”比;
& lt; div id=安啾呃浮北?
模块列表
& lt; div类="窗口" id="比;
& lt; strong> 1 & lt;/strong> & lt; br/比;
& lt; br/比;
& lt;/div>
& lt; br/比;
& lt; div类="窗口" id="比;
& lt; strong> 2 & lt;/strong> & lt; br/比;
& lt; br/比;
& lt;/div>
& lt; div类="窗口" id="比;
& lt; strong> 3 & lt;/strong> & lt; br/比;
& lt; br/比;
& lt;/div>
& lt;/div>
& lt; div id=澳谌荨痹?
& lt; p>下降这里! & lt;/p>
& lt;/div>
& lt;/div>
& lt;/div
在页面载入时,首先使用jquery ui里拖的功能使得我们的3个窗体变为可以拖动的。
因为他们有共同的类“窗口”,我们可以这样:
$ (" .window ") .draggable ({
助手:“克隆”
});
助手:克隆的意思是我们只是拖出这个窗口的副本。如果不加这个属性。我们就会把这个窗体拖走了。
上边id为内容的div就是我们要放置窗体的目标容器。我们要把这个容器设置为可抛弃的。就是标记它为可以接受拽过来的窗口。
$(" #内容”).droppable ({});
当内容被放入窗口的时候会触发滴事件。我们为滴事件定义一个函数。
下边代码中入参的ui就是当前被滴进容器的元素。这里我们做一个判断,如果被放进来的元素的类包含jq-draggable-outcontainer。也就是说,这个元素是我们从左边siderbar拽过来的话。
首先判断这个元素中的innerText。实现根据innerText的实现不同在右边的窗体中呈现一个新的窗体。(这里使用innerText判实现断是不严谨的,我只是做一个演示。为大家抛砖引玉)。
$(" #内容”).droppable ({
下降:函数(事件,ui) {//调试器;
如果(ui.draggable [0] .className.indexOf祝辞(“jq-draggable-outcontainer”);0){
var文本=ui.draggable [0] .innerText
开关(文本){
“1”:
(美元)
(“p”)
.append (' & lt; div类=按翱趈q-draggable-incontainer”id=皐indow1”祝辞& lt; strong> 1 & lt;/strong> & lt; br/祝辞& lt; br/祝辞& lt;/div> & lt; div祝辞& lt;/div>”);
SBS.UI.Views.Plumb。AddEndpoints (“window1”[“BottomCenter”], []);
“2”:
(美元)
(“p”)
.append (' & lt; div类=按翱趈q-draggable-incontainer”id=皐indow2”祝辞& lt; strong> 2 & lt;/strong> & lt; br/祝辞& lt; br/祝辞& lt;/div> & lt; div祝辞& lt;/div>”);
SBS.UI.Views.Plumb。AddEndpoints (“window2”[“BottomCenter”、“BottomLeft”], [" TopCenter "]);
}打破;
案例3:
(美元)
(“p”)
后(' & lt; div类=按翱趈q-draggable-incontainer”id=皐indow3”祝辞& lt; strong> 3 & lt;/strong> & lt; br/祝辞& lt; br/祝辞& lt;/div>”);
SBS.UI.Views.Plumb。AddEndpoints (“window3”, [], [“TopCenter”、“TopLeft”]);
}
}
}
});
