drop here!
在页面载入时,首先使用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].innerTextswitch (text) {case "1":$(this).find("p").append('1');SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);case "2":$(this).find("p").append('2');SBS.UI.Views.Plumb.AddEndpoints("window2", ["BottomCenter","BottomLeft"], ["TopCenter"]);} break;case "3":$(this).find("p").after('3
');SBS.UI.Views.Plumb.AddEndpoints("window3", [], ["TopCenter", "TopLeft"]);}}}});大家注意这个函数SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);它是封装了jsplumb 为窗体加上输入和输出的功能。先不管它,一会我们再分析。
现在我们试着拖动一个窗体到右边的容器。可以看到实际已经在右边创建了一个窗体。如下图。
蓝色的圆点就是我们刚才绘画出来的一个output点。由于我们在上边代码中指定了BottomCenter。所以这个点被画在了windows底部的中间。
现在让jsplumb是如何画出来这个点,并且需要哪些初始化过程。
//var SBS = SBS || {};SBS.UI = SBS.UI || {};SBS.UI.Views = SBS.UI.Views || {};SBS.UI.Views.Plumb = {init: function () {jsPlumb.importDefaults({// default drag optionsDragOptions: { cursor: 'pointer', zIndex: 2000 },// default to blue at one end and green at the otherEndpointStyles: [{ fillStyle: '#225588' }, { fillStyle: '#558822'}],// blue endpoints 7 px; green endpoints 11.Endpoints: [["Dot", { radius: 7}], ["Dot", { radius: 11}]],// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this// case it returns the 'labelText' member that we set on each connection in the 'init' method below.ConnectionOverlays: [["Arrow", { location: 0.9}],["Label", {location: 0.1,id: "label",cssClass: "aLabel"}]]});var connectorPaintStyle = {lineWidth: 5,strokeStyle: "#deea18",joinstyle: "round"},// .. and this is the hover style. connectorHoverStyle = {lineWidth: 7,strokeStyle: "#2e2aF8"};sourceEndpoint = {endpoint: "Dot",paintStyle: { fillStyle: "#225588", radius: 7 },isSource: true,connector: ["Flowchart", { stub: 40}],connectorStyle: connectorPaintStyle,hoverPaintStyle: connectorHoverStyle,connectorHoverStyle: connectorHoverStyle};targetEndpoint = {endpoint: "Rectangle",paintStyle: { fillStyle: "#558822", radius: 11 },hoverPaintStyle: connectorHoverStyle,maxConnections: -1,dropOptions: { hoverClass: "hover", activeClass: "active" },isTarget: true};jsPlumb.bind("jsPlumbConnection", function (connInfo, originalEvent) {init(connInfo.connection);});jsPlumb.bind("click", function (conn, originalEvent) {if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))jsPlumb.detach(conn);});},AddEndpoints: function (toId, sourceAnchors, targetAnchors) {var allSourceEndpoints = [], allTargetEndpoints = [];for (var i = 0; i < sourceAnchors.length; i++) {var sourceUUID = toId + sourceAnchors[i];allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor: sourceAnchors[i], uuid: sourceUUID }));}for (var j = 0; j < targetAnchors.length; j++) {var targetUUID = toId + targetAnchors[j];allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID }));}}}//Page load events$(document).ready(function () {//all JavaScript that needs to be call onPageLoad can be put here.SBS.UI.Views.Plumb.init();}); 上边的代码是我写的一个调用jsplumb的js类。init函数里初始化了圆点和连接的样式。具体的我们可以查看它的api http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-8-all-js.html
我们主要看AddEndpoints 函数。它接收3个参数toId, sourceAnchors, targetAnchors。
toId就是我们要在哪个元素上加输入和输出的标记。sourceAnchors就是输出的点的集合,targetAnchors就是输入的点的集合。遍历这些点。并且调用jsplumb的方法
jsPlumb.addEndpoint()就可以把这几个点画到元素上去了。
基本的功能就完成了。但是我们新画出来的window还不能拖拽。我们要指定这几个window是可以拖拽的。
使用jquery里的draggable为其标记。并指定可以拖拽的范围(局限于我们的content容器)。如果想限制元素拖拽的范围,只需要设置它的containment属性。
$(".jq-draggable-incontainer").draggable({containment: $( "#content" ).length ? "#content" : "document"});现在这几个window可以拖拽了。并且可以使用箭头来连接。
刷新元素
我发现当我拖拽了window之后,那几个点是不跟着走的。查了api找到了一个函数。 jsPlumb.repaintEverything();就是重新画所有的东西。
我们可以把它放在droppable的drop事件的最后。
这个demo做的比较糙,因为也是初步调研阶段。比如用户拽了同一个window到右边2次。就会出现错误。因为id重复了。我们可以遍历id或者把已经创建的id存起来,来创建新的id。不过我做了一个偷懒的芳芳,也符合我本身的需求。就是一种类型的window只可以拽一次。第二次就不让用户拽了。Jquery提供了很好的实现。自动弹回去的功能。
在页面第一次加载时候,我先设置几个bool值到data里。当用户拽了一个window一次之后,就把那revert值设置为true。
$(function () {$('#tmpl1').data("revert", false);$('#tmpl2').data("revert", false);$('#tmpl3').data("revert", false);。。。。}case "1":if ($('#tmpl1').data("revert") == true) {$('#tmpl1').draggable({ revert: "valid" });}else {$(this).find("p").append('1');SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);$('#tmpl1').data("revert", true);} break;源码下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- 详解python 3.6 安装json 模块(simplejson)
- Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
- 详解Node.js中path模块的resolve()和join()方法的区别
- Nodejs调用Dll模块的方法
- Python3中的json模块使用详解
- 详解JS模块导入导出
- javascript 构建模块化开发过程解析
Top
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- Laravel 11.14版本发布 - 新的字符串助手和ServeCommand改进(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
- 2016-10
- 2016-11
- 2017-06
- 2017-07
- 2017-08
- 2017-09
- 2017-10
- 2017-11
- 2018-03
- 2018-04
- 2018-05
- 2018-06
- 2018-09
- 2018-11
- 2018-12
- 2019-02
- 2020-03
- 2020-04
- 2020-05
- 2020-06
- 2021-04
- 2021-05
- 2021-07
- 2021-08
- 2021-09
- 2021-10
- 2021-11
- 2022-08
- 2022-09
- 2022-10
- 2022-11
- 2022-12
- 2023-01
- 2023-02
- 2023-03
- 2023-04
- 2023-05
- 2023-06
- 2023-07
- 2023-09
- 2023-10
- 2023-11
- 2023-12
- 2024-01
- 2024-02
- 2024-03
- 2024-04
Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号
![]()