Jsplump動態繪製狀態機圖

我使用jsplumb繪製動態狀態機圖。點擊一個按鈕後，我需要在繪圖區域添加新框，並允許用戶根據需要定位它。Jsplump動態繪製狀態機圖

我沒有得到任何適當的，容易理解的文檔。我嘗試了幾件事：

var i=8; 
function AddDiv() { 
    var obj = new Date(); 
    var Div = $('<div/>', { 
     'class':'box ui-draggable ui-draggable-handle ui-droppable', 
     'id':'box_'+i, 
     'html':'BOXESNEW' 
    }).appendTo('.statemachine_cont'); 
    jsPlumb.addEndpoint($(Div), targetEndpoint); 
    $(Div).draggable(
    { 
     drag: function(){ 
      jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints 
     //  jsPlumb.addEndpoint($(this));  
     } 
    }); 
    $(Div).addClass('box ui-draggable ui-draggable-handle ui-droppable'); 
} 
var a = $("#a"); 

//Setting up drop options 
var targetDropOptions = { 
    activeClass: 'dragActive' 
}; 
//Setting up a Target endPoint 
var targetColor = "#BEBEBE"; 
var targetEndpoint = { 
    anchor: "BottomCenter", //Placement of Dot 
    endpoint: ["Dot", { radius: 8}], //Other types are rectangle, Image, Blank, Triangle 
    paintStyle: { fillStyle: targetColor }, //Line color 
    isSource: true, //Starting point of the connector 
    // scope: "green dot", 
    connectorStyle: { strokeStyle: "#5C96BC", lineWidth: 2 }, // Means Bridge width and bridge color 
    connector: ["Bezier"], //Other properties Bezier 
    maxConnections: -1, //No upper limit 
    isTarget: true, //Means same color is allowed to accept the connection 
    dropOptions: targetDropOptions //Means when the drag is started, other terminals will start to highlight 
}; 
jsPlumb.bind("ready", function() { 
    //Set up endpoints on the divs 
    jsPlumb.addEndpoint($(".box ui-draggable ui-draggable-handle ui-droppable"), targetEndpoint); 
    jsPlumb.addEndpoint($(".box ui-draggable ui-draggable-handle ui-droppable"), sourceEndpoint); 

    jsPlumb.draggable($(".box ui-draggable ui-draggable-handle ui-droppable")); 
    jsPlumb.animate($("#a"), { "left": 50, "top": 100 }, { duration: "slow" }); 
});

不知道我做了什麼是正確的，我提到了一些可用的在線代碼並對其進行了修改。

我在這裏的問題是：按鈕點擊我可以添加一個新的框，也能夠從該框中拖動連接。但是當我試圖拖動那個盒子（即改變它的位置）時，連接不會移動。 Box已移動，但我無法移動與框的連接。

當我嘗試移動新添加的盒子或連接到新盒子的盒子時，兩個盒子都可以移動，但連接保持靜止並且不移動。就好像其他箱子被移動一樣，它隨着連接而移動。我添加了一個供參考的圖像。

第1張圖片顯示了新添加的框和新連接的顯示方式。第二張圖片顯示了盒子的移動如何產生問題。

來源

2015-02-12 Arti

你可以創建一個小提琴來玩。 – 2015-02-13 04:01:28

jsplumb還存在嗎？該網站似乎下降 – swinefeaster 2016-07-13 23:59:14

看起來像網址更改爲[jsplumb]（https://jsplumbtoolkit.com/） – Arti 2016-07-14 05:39:01

這裏是我manged得到它的工作。我修改了我的整個代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 

    <script type='text/javascript' src='js/jquery-1.10.1.js'></script> 
    <link rel="stylesheet" type="text/css" href="css/demo-all.css"> 
    <link rel="stylesheet" type="text/css" href="css/demo.css"> 
    <script type='text/javascript' src="js/jquery.ui.touch-punch-0.2.2.min.js"></script> 
    <script type='text/javascript' src="js/jquery-ui-1.9.2.min.js"></script> 
    <script type='text/javascript' src="js/jquery.jsPlumb-1.7.2-min.js"></script> 
    <style type='text/css'> 
    .hidden { display: none; } 
    </style> 
<script type='text/javascript'> 
$(window).load(function(){ 
function cloneWindow(instance) { 
    var $jspContainer = $("#statemachine-demo"), 
     divid = "fromTemplate_" + new Date().getTime().toString()   
     $cloneElement = $("<div class='w'>New Window&nbsp;<div class='ep'></div></div>").attr("id", divid); 

    $jspContainer.append($cloneElement); 

    instance.draggable(divid); 
    instance.makeSource($cloneElement, { 
       filter: ".ep", // only supported by jquery 
       anchor: "Continuous", 
       connector: ["StateMachine", { 
        curviness: 1 
       }], 
       connectorStyle: { 
        strokeStyle: "#5c96bc", 
        lineWidth: 2, 
        outlineColor: "transparent", 
        outlineWidth: 4 
       }, 
       maxConnections: 10, 
       onMaxConnections: function (info, e) { 
        alert("Maximum connections (" + info.maxConnections + ") reached"); 
       } 
      }); 

    instance.bind("connection", function (info) { 
     info.connection.getOverlay("label").setLabel(info.connection.id); 
    }); 


    instance.makeTarget($cloneElement, { 
     anchor:"Continuous", 
     dropOptions:{ hoverClass:"dragHover" } 
     }); 

} 

jsPlumb.ready(function() { 

     $("#addwindow").click(function() { 
      cloneWindow(instance); 
     }); 
     // setup some defaults for jsPlumb. 
     var instance = jsPlumb.getInstance({ 
      Endpoint: ["Dot", { 
       radius: 2 
      }], 
      HoverPaintStyle: { 
       strokeStyle: "#1e8151", 
       lineWidth: 2 
      }, 
      ConnectionOverlays: [ 
       ["Arrow", { 
        location: 1, 
        id: "arrow", 
        length: 14, 
        foldback: 0.8 
       }], 
       ["Label", { 
        label: "Drag this and drop it on another element to make a connection.", 
        id: "label", 
        cssClass: "aLabel" 
       }] 
      ], 
      Container: "statemachine-demo" 
     }); 

    jsPlumb.importDefaults({ 
       filter: ".ep", 
       anchor: "Continuous", 
       connector: ["StateMachine", { 
        curviness: 1 
       }], 
       connectorStyle: { 
        strokeStyle: "#5c96bc", 
        lineWidth: 2, 
        outlineColor: "transparent", 
        outlineWidth: 4 
       }, 
       maxConnections: 10, 
       dropOptions: { 
        hoverClass: "dragHover" 
       } 

    }); 
     var windows = jsPlumb.getSelector(".statemachine-demo .w"); 

     // initialise draggable elements. 
     instance.draggable(windows); 

     // bind a click listener to each connection; the connection is deleted. you could of course 
     // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was 
     // happening. 
     instance.bind("click", function (c) { 
      instance.detach(c); 
     }); 

     // bind a connection listener. note that the parameter passed to this function contains more than 
     // just the new connection - see the documentation for a full list of what is included in 'info'. 
     // this listener sets the connection's internal 
     // id as the label overlay's text. 
     instance.bind("connection", function (info) { 
      info.connection.getOverlay("label").setLabel(info.connection.id); 
     }); 

     // suspend drawing and initialise. 
     instance.doWhileSuspended(function() { 


      // make each ".ep" div a source and give it some parameters to work with. here we tell it 
      // to use a Continuous anchor and the StateMachine connectors, and also we give it the 
      // connector's paint style. note that in this demo the strokeStyle is dynamically generated, 
      // which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i 
      // would recommend you do. Note also here that we use the 'filter' option to tell jsPlumb 
      // which parts of the element should actually respond to a drag start. 
      instance.makeSource(windows, { 
       filter: ".ep", // only supported by jquery 
       anchor: "Continuous", 
       connector: ["StateMachine", { 
        curviness: 1 
       }], 
       connectorStyle: { 
        strokeStyle: "#5c96bc", 
        lineWidth: 2, 
        outlineColor: "transparent", 
        outlineWidth: 4 
       }, 
       maxConnections: 10, 
       onMaxConnections: function (info, e) { 
        alert("Maximum connections (" + info.maxConnections + ") reached"); 
       } 
      }); 


      // initialise all '.w' elements as connection targets. 
      instance.makeTarget(windows, { 
       dropOptions: { 
        hoverClass: "dragHover" 
       }, 
       anchor: "Continuous" 
      }); 

      // and finally, make a couple of connections 
      instance.connect({ 
       source: "opened", 
       target: "phone1" 
      }); 
      instance.connect({ 
       source: "phone1", 
       target: "inperson" 
      }); 
      instance.connect({ 
       source: "phone1", 
       target: "phone1" 
      }); 


     });       

    }); 
}); 

</script> 


</head> 
<body> 
    <div class="demo statemachine-demo" id="statemachine-demo" style="border:2px solid;border-radius:25px;"> 
    <button type="button" id="addwindow">Add Window</button> 
    <div class="w" id="opened">BEGIN&nbsp; 
     <div class="ep"></div> 
    </div> 
    <div class="w" id="phone1">PHONE INTERVIEW 1&nbsp; 
     <div class="ep"></div> 
    </div> 
    <div class="w" id="phone2">PHONE INTERVIEW 2&nbsp; 
     <div class="ep"></div> 
    </div> 
    <div class="w" id="inperson">IN PERSON&nbsp; 
     <div class="ep"></div> 
    </div> 
    <div class="w" id="rejected">REJECTED&nbsp; 
     <div class="ep"></div> 
    </div> 
    <div class="w hidden" id="template_newwindow"> 
     <div class="ep"></div> 
    </div> 
</div> 
</body> 
</html>

來源

2015-02-16 06:40:57 Arti

事業部已經是一個jQuery對象，就沒有必要再包裹。

選項1個

Div.draggable(
    { 
     drag: function(){ 
      jsPlumb.repaintEverything(); 
     } 
    });

選項2

jsPlumb.draggable(Div.attr('id'));

來源

2015-02-13 04:03:50

Jsplump動態繪製狀態機圖

回答

相關問題