zoukankan      html  css  js  c++  java
  • 技术弟弟JQuery+JQueryUI+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(拖拽)功能。

    具体请见http://jqueryui.com/

    第三个Jsplumb 是一个允许里使用箭头,线去连接UI上的元素的JS库。目前的版本是1.3.8。已经是一个成熟的产品,并且经常更新。我当时查到了很多类似的js库。调研比较之后决定使用它。他的官方网站:http://jsplumb.org/jquery/demo.html

     

    首先我还是说说需求。UI左边是待拖拽的模块。我从左边把它拖拽到右边的容器里。大概就是下图描述的样子。

    左边三个窗体。我们给他同一的class ,方便jquery来操作。

    <div id="container">
        <div id="mainContent">
            <div id="sidebar">
                Module List
                <div class="window" id="">
                    <strong>1</strong><br />
                    <br />
                </div>
                <br />
                <div class="window" id="">
                    <strong>2</strong><br />
                    <br />
                </div>
                 <div class="window" id="">
                    <strong>3</strong><br />
                    <br />
                </div>
            </div>
            <div id="content">
            <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 class="window jq-draggable-incontainer" id="window1"><strong>1</strong><br /><br /></div><div style="height:100px;"></div>');
                                    SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);
                            case "2":
                                 $(this)
                                .find("p")
                                .append('<div class="window jq-draggable-incontainer" id="window2"><strong>2</strong><br /><br /></div><div style="height:100px;"></div>');
                                    SBS.UI.Views.Plumb.AddEndpoints("window2", ["BottomCenter","BottomLeft"], ["TopCenter"]);
                                } break;
                            case "3":
                                    $(this)
                                    .find("p")
                                    .after('<div class="window jq-draggable-incontainer" id="window3"><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是如何画出来这个点,并且需要哪些初始化过程。

    // <reference path="jquery-1.5.1-vsdoc.js" />
    
    var SBS = SBS || {};
    SBS.UI = SBS.UI || {};
    SBS.UI.Views = SBS.UI.Views || {};
    SBS.UI.Views.Plumb = {
        init: function () {
            jsPlumb.importDefaults({
                // default drag options
                DragOptions: { cursor: 'pointer', zIndex: 2000 },
                // default to blue at one end and green at the other
                EndpointStyles: [{ 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('<div class="window jq-draggable-incontainer" id="window1"><strong>1</strong><br /><br /></div><div ></div>');
                                    SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);
                                    $('#tmpl1').data("revert", true);
                                } break;

    源码下载

    【看完想不会都难的系列教程】

     
    摘要: 先看效果.由于时间的原因。这个demo只兼容IE8,IE9。其他浏览器暂时不支持。不过jsplumb本身是支持各种浏览器的。写这篇文章是因为我在实际开发中遇到一个需求,支持拖拽模块到指定的容器里。并且每个模块会有自己的output 和input。开始觉得很酷也很变态。经过一段时间的调研,特把结果分享给大家。不足之处,敬请指正。看了题目里的3个J。可能有的朋友觉得头晕,需要这么多东东?我先逐一介绍一下。第一个jquery是我们平时经常使用的jquery 库。它可以让你用很少的代码实现一些很酷的js功能(实际它封装了很多js)。第二个JQueryUI提供了一整套核心交互插件,UI部分用jQuery阅读全文
    posted @ 2012-04-17 18:24 技术弟弟 阅读(521) | 评论 (4) 编辑
     
    摘要: 如果你浏览一些最流行的网站。你会发现实际上他们有两个版本。一个用于桌面浏览器(完整布局),另一个是优化移动(触摸集中)。某些情况下,在传统的网站上也可以使用悬停界面来提高用户的体验,他们可以在特定的区域类浏览更多的内容。阅读全文
    posted @ 2011-12-20 12:02 技术弟弟 阅读(3290) | 评论 (27) 编辑
     
    摘要: 在本教程中,我们将创建一个独特的滑动框导航。这样做可以让有菜单的盒子滑出,并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动。我们将使用jQuery Easing Plugin插件和一些由tibchris.提供的漂亮图片标记在HTML的结构中,我们将使用一个无序的列表,其中每个菜单项将包含的主要链接和一个子菜单的div元素:<ul id="sdt_menu" class="sdt_menu"> <li><a href="#"> &l阅读全文
    posted @ 2011-12-19 14:37 技术弟弟 阅读(2983) | 评论 (30) 编辑
  • 相关阅读:
    洛谷1069 细胞分裂
    洛谷1050 循环
    CF Good Bye 2018
    洛谷1043 数字游戏
    洛谷1041 传染病控制
    洛谷1040 加分二叉树
    洛谷1039 侦探推理
    洛谷1038 神经网络
    设计模式的区别
    volatile和synchronized与lock的理解
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2454331.html
Copyright © 2011-2022 走看看