Boilerplate
Here’s a simple page that you can copy in order to get going. A few basic things are illustrated here:
- Nodes (with class w) are positioned absolute.
- CSS is used to set the z-index of nodes and of jsPlumb connectors (which have a class of _jsPlumb_connector). In this case, nodes are placed above connectors.
- You should use
jsPlumb.readyto wrap your initial access to jsPlumb. - A listener is bound to the
connectionevent on jsPlumb.
<!doctype html>
<html>
<head>
<title>jsPlumb simple example</title>
<style type="text/css">
.w {
border:1px solid #456;
position:absolute;
width:60px;
height:60px;
z-index:10;
}
._jsPlumb_connector {
z-index:9;
}
#one {
left:50px;
top:50px;
}
#two {
left:350px;
top:350px;
}
</style>
</head>
<body>
<div id="one">one</div>
<div id="two">two</div>
Drag a connection from <strong>one</strong> to <strong>two</strong>
<div id="debug"></div>
<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="http://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all.js"></script>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.addEndpoint("one", { isSource:true });
jsPlumb.addEndpoint("two", { isTarget:true });
jsPlumb.bind("connection", function(info) {
console.log("new connection:", info);
$("#debug").html("hello.");
});
});
</script>
</body>
</html>
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
