基于jtopo开发工具包的拖拉拽功能

 

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;
      width: 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{
      width: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>
posted @ 2017-12-28 15:24  MissLee  阅读(698)  评论(0)  编辑  收藏  举报