jsplumb

Can I connect objects with javascript?

由 核能气质少年 提交于 2019-12-13 04:00:34
问题 I want to make an interface that looks like this So here is what the user can do 1- Connect people to each other 2- See some information about each person (the balloon) 3- Move these objects around without them loosing their connections Then I want to save these connection information using ajax, so that I can see who is connected to who, I also need to redraw these diagrams next time the user sees the page. It seems like jsPlumb, paperjs, and raphael can all do this and a lot more, my

How to enable resize on JsPlumb widget?

由 安稳与你 提交于 2019-12-12 15:08:08
问题 Am building a list of widgets with JSPlumb and AngularJS, i need to enable resize using the handler on each widget. There is an example already on it, i have implemented , but resize does not happen. here is my code, HTML: <div ng-controller="CustomWidgetCtrl" plumb-item class="item" resizeable> App.js: routerApp.directive('resizeable',function($compile){ return{ restrict: 'A', link: function(scope, element, attrs){ element.resizeable({ resize : function(event, ui) { jsPlumb.repaint(ui.helper

jsPlumb New Connection Handler: How to get the Endpoint anchor position?

由 ☆樱花仙子☆ 提交于 2019-12-12 11:32:16
问题 Yeah, so I've been playing with jsPlumb. Let's say I have a div with two endpoints; one TopCenter, one BottomCenter. When a new connection is created, I can bind to that event with the function below. My question is, how do I get the anchor position for the endpoints? I do get the Source and TargetEndpoint objects, but looking at the documentation, I don't see a way to get the anchor position... thanks! jsPlumb.bind("jsPlumbConnection", function(connectionInfo) { /* connection : the new

How to connect to endpoint using jsplumb?

由 冷暖自知 提交于 2019-12-12 03:36:09
问题 I am using JSplumb for connections, I am getting some data from JSON and based on that I want to make connection between two endpoints, I have already created structure and created endpoints on each node, I tried to find this on jsplumb documentation but couldn't.. 回答1: At the time of adding endpoints make sure that you also assign them Uuid based on the element it is placed on. You can connect two endpoints in jsPlumb as: jsPlumb.ready(function () { var e0 = jsPlumb.addEndpoint("container0",

jsplumb draggable not working.

由 随声附和 提交于 2019-12-12 02:58:24
问题 I can't seem to work out why my jsplumb is not working. I have created a very simple sippet example (attached to this post). jsPlumb.ready(function() { jsPlumb.draggable($('.square')) jsPlumb.connect({ source: "element1", target: "element2" }); }); .square { background-color: red; width: 50px; height: 50px; position: absolute; } <body> <h1>Hello World!</h1> <div id="element1" class="square"></div> <div id="element2" class="square" style="left:300px"></div> <script data-require="jquery@*" data

Get jsPlumb Line Color After SetPaintStyle

由 泄露秘密 提交于 2019-12-12 01:52:24
问题 I had sucessfully created a line using jsPlumb. Below is the code: myid_create_line_instance(0, '1px', '#00000'); //A function that creates line instance. function myid_create_line_instance(id, width, color){ jsPlumb_instance[id] = jsPlumb.getInstance(); var id1 = 'myid_templates_editor_line_' + id + '_pair_1'; var id2 = 'myid_templates_editor_line_' + id + '_pair_2'; var endpointOptions = { anchor:'BottomCenter', maxConnections:1, endpoint:['Rectangle',{width:'1px', height:'1px' }],

Make the boxes stay still when scrolling down using the scroll bar

由 点点圈 提交于 2019-12-11 19:11:43
问题 when I click a box, i can drag it around the screen. You can click the folder icon to open up information view, and a scroll bar will appear because there are a lot of text. Problem: when i use my mouse to scroll the scrollbar, it also drags the boxes as well. How do I make it not move the box when I click the scroll bar to move the bar? I am using jsPlumb.draggable() to enable dragging. jsfiddle: http://jsfiddle.net/7PuN3/2/ 回答1: I would stop/start dragging: $(function(){ $('#1 .button_wrap'

jsPlumb connecting custom overlays - endpoint not moved

由 风流意气都作罢 提交于 2019-12-11 05:36:25
问题 I am creating custom overlays for my connections in jsPlumb. connectorOverlays: [ ["Custom", { create: function(component) { return connectionNode(); }, location:0.5, id:"customOverlay" }] ] connectionNode() creates a div with a select list in it. The divs themselves should be connectable, i.e., I want to connect two labels of different connectors. var overlay_div = $(connection.overlays[0].canvas); jsPlumb.addEndpoint(overlay_div, { anchor:[ "Perimeter", { shape:"Rectangle"}] },

jsPlumb: dragging new connection should remove existing one

由 ∥☆過路亽．° 提交于 2019-12-11 00:40:51
问题 Using jsPlumb, I managed to have the following setup: There are multiple nodes acting like nodes in a special type of flowchart. Each node has one single target where connections can be dropped onto. Every node has zero, one or more exits. Each exit acts as jsPlumb source, and is allowed to have one connection at most. Little example first: http://fiddle.darkspot.ch/ivr/flowchart/ivrplumb.html (after an hour of trying, I unfortunately didn't get it to run on jsFiddle - so I host it myself)

Can I apply offset to continious anchor in jsplumb

由 人走茶凉 提交于 2019-12-10 19:06:48
问题 I want to use the "continuous" anchor placement option in jsplumb. This works great, but the anchor is placed half inside the container div and half outside of the container. I would like the anchors to be completely outside the container div. If possible event with a small space between the div and the anchor (one or two pixels). My purpose is to put those anchors on top of the arrows of the connections. I then want to make the anchors transparent so the user can "click on the arrows and
订阅 jsplumb