JsPlump连线

最新推荐文章于 2023-11-13 10:41:06 发布

yinxianluo

最新推荐文章于 2023-11-13 10:41:06 发布

阅读量3k

点赞数

分类专栏： JAVA开发文章标签： js

本文链接：https://blog.csdn.net/yinxianluo/article/details/48829193

版权

本文介绍如何使用JsPlumb库创建连线，并详细讲解了初始化、添加连接点、绑定元素以及HTML和CSS代码的应用，最终展示连线效果。

摘要由CSDN通过智能技术生成

JsPlump连线题并获取每个链接的source与target

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.4.0-all-min.js "></script>
//<span style="color:#FF0000;">上面的三个js文件可以直接在jsplump官网上下载网址：https://github.com/sporritt/jsplumb/</span>

 <style type="text/css">
        #question,#answer{float: left;width: 300px;height: 600px;border: 1px solid red;}
        #answer{margin-left: 20px}
        .state_question{
            width: 200px;
            background: white;
            border: 1px solid red;
            margin-top: 20px;
            height: 60px;
            margin-left: 30px;
        }
    </style>
    <script>
    var list;
        jsPlumb.ready(function() {
            jsPlumb.importDefaults({
            DragOptions : { cursor: 'pointer'}, //拖动时鼠标停留在该元素上显示指针，通过css控制
            PaintStyle : { strokeStyle:'#666' },//元素的默认颜色
            EndpointStyle : { width:20, height:16, strokeStyle:'#666' },//连接点的默认颜色
            Endpoint : "Rectangle",//连接点的默认形状
            Anchors : ["TopCenter"]//连接点的默认位置
        });
        var exampleDropOptions = {
            hoverClass:"dropHover",//释放时指定鼠标停留在该元素上使用的css class
            activeClass:"dragActive"//可拖动到的元素使用的css class
        };
        var color1 = "#676767";                     
        var exampleEndpoint1 = {            
            endpoint:["Dot", { radius:11 }],//设置连接点的形状为圆形
            paintStyle:{ fillStyle:color1 },//设置连接点的颜色
            isSource:true,  //是否可以拖动（作为连线起点）
            scope:"green dot",//连接点的标识符，只有标识符相同的连接点才能连接
            connectorStyle:{ strokeStyle:color1, lineWidth:6 },//连线颜色、粗细
            connector: "Straight",//设置连线为贝塞尔曲线
            maxConnections:1,//设置连接点最多可以连接几条线
            //isTarget:true,  //是否可以放置（作为连线终点）
            dropOptions : exampleDropOptions//设置放置相关的css
        };
        var color2 = "#676767";
        var exampleEndpoint2 = {
            endpoint:["Dot", { radius:11 }],   //设置连接点的形状为矩形
            anchor:"BottomLeft",    //设置连接点的位置，左下角
            paintStyle:{ fillStyle:color2, opacity:0.5 },   //设置连接点的颜色、透明度
            //isSource:true,  //同上
            scope:'green dot', //同上
            connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上
            connector : "Straight", //设置连线为直线
            isTarget:true,  //同上
            maxConnections:1,//同上
            dropOptions : exampleDropOptions,//同上
            beforeDetach:function(conn) {   //绑定一个函数，在连线前弹出确认框
                return confirm("Detach connection?");
            },
            onMaxConnection