1.jTopo是什么?
它是基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。具体使用方法请参考官网--->jTopo官网：http://www.jtopo.com/index.html
2.为什么需要jTopo？
用于界面图形化展示、操作，这样能给客户更直接，简单的用户体验
3.以下是一个拖拉拽小实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
<title>Editor</title>
<link href="assets/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jtopo-min.js"></script>
<script type="text/javascript" src="js/toolbar.js"></script>
css部分：
<style type="text/css">
#editor {
resize:vertical;
overflow:auto;
border:1px solid silver;
border-radius:5px;
min-height:200px;
box-shadow: inset 0 0 10px silver;
padding:1em;
}
#contextmenu {
border: 1px solid #aaa;
border-bottom: 0;
background: #eee;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
display: none;
}
#contextmenu li a {
display: block;
padding: 10px;
border-bottom: 1px solid #aaa;
cursor: pointer;
}
#contextmenu li a:hover {
background: #fff;
}
#menu{
height:50px;
}
#menu img{
border: solid 2px white;
}
#menu img:hover{
border: solid 2px blue;
}
#tip_div{
position: absolute;
200px;
height: 100px;
z-index: 1004;
display:none;
background-color: rgb(208,146,133);
filter:Alpha(Opacity=90,Style= 0);
opacity: 0.9;
}
label{
display: inherit;
margin-bottom:0px;
}
.jtopo_toolbar{
height:auto;
}
#toolbar2 {
vertical-align:top;
}
#toolbar2 img{
60px;
height:60px;
padding:3px;
border:1px solid #FFCC99;
margin:3px;
}
#toolbar2 img:hover{
background-color:#CCCCCC;
cursor:pointer;
}
</style>
JS部分：
<script id='code'>
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("imgSrc", e.target.src);
}
function drop(e) {
e.preventDefault();
imgSrc = e.dataTransfer.getData("imgSrc");
}
var scene, imgSrc, stage;
$(document).ready(function() {
var canvas = document.getElementById("canvas");
//空白的数据
stage = new JTopo.Stage(canvas);
setStage(stage);
showJTopoToobar(stage);
scene = new JTopo.Scene(stage);
// 拖拽图标到场景并松开鼠标
stage.mouseover(function(e) {
if (null != imgSrc) {
var b = new JTopo.Node();
b.setImage(imgSrc, true);
b.setLocation(e.x,e.y);
scene.add(b);
imgSrc = null;
}
});
});
</script>
</head>
<body>
<img src="./img/num1.png" id="imgS" draggable="true" ondragstart="drag(event)">
<canvas width="750" height="455" id="canvas" ondrop="drop(event)" ondragover="allowDrop(event)"></canvas>
</body>
</html>