<script src=\"~/Content/jquery-1.9.1.min.js\"></script>
<script src=\"~/Content/jquery-ui-1.11.4.custom/jquery-ui.js\"></script>
<link href=\"~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.css\" rel=\"stylesheet\" />
<script src=\"~/Content/jsPlumb-master/dist/js/jquery.jsPlumb-1.7.5.js\"></script>

<div id=\"divContentLeftMenu\">
      <div class=\"sidebar-menu\" id=\"divSidebar\">
        <a href=\"#plantmodel\" onclick=\"Resize()\" class=\"nav-header menu-first collapsed\" data-toggle=\"collapse\">工厂模型</a>
        <ul id=\"plantmodel\" class=\"nav nav-list collapse menu-second\">
        </ul>
        <a href=\"#artlinemodel\" onclick=\"Resize()\" class=\"nav-header menu-first collapsed\" data-toggle=\"collapse\">工艺段模型</a>
        <ul id=\"artlinemodel\" class=\"nav nav-list collapse menu-second\">
          <li>
            <a href=\"#\">
              <div class=\"node radius\" id=\"node4\" dbtype=\"DTO_TM_ART_LINE\">
                <label>工段</label>
              </div>
            </a>
          </li>
          <li>
            <a href=\"#\">
              <div class=\"node\" id=\"node5\" dbtype=\"DTO_TM_ULOC\">
                <label>工位</label>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div id=\"divCenter\"></div>

//基本连接线样式
var connectorPaintStyle = {
  strokeStyle: \"#1e8151\",
  fillStyle: \"transparent\",
  radius: 5,
  lineWidth: 2
};
// 鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
  lineWidth: 3,
  strokeStyle: \"#216477\",
  outlineWidth: 2,
  outlineColor: \"white\"
};
var endpointHoverStyle = {
  fillStyle: \"#216477\",
  strokeStyle: \"#216477\"
};
//空心圆端点样式设置
var hollowCircle = {
  DragOptions: { cursor: \'pointer\', zIndex: 2000 },
  endpoint: [\"Dot\", { radius: 7 }], //端点的形状
  connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
  connectorHoverStyle: connectorHoverStyle,
  paintStyle: {
    strokeStyle: \"#1e8151\",
    fillStyle: \"transparent\",
    radius: 5,
    lineWidth: 2
  },    //端点的颜色样式
  //anchor: \"AutoDefault\",
  isSource: true,  //是否可以拖动（作为连线起点）
  connector: [\"Straight\", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
  isTarget: true,  //是否可以放置（连线终点）
  maxConnections: -1,  // 设置连接点最多可以连接几条线
  connectorOverlays: [[\"Arrow\", { width: 10, length: 10, location: 1 }]]
};

　　　　　　　　$(function(){
        //左边区域的draggable事件
        $(\"#divContentLeftMenu .node\").draggable({
          helper: \"clone\",
          scope: \"plant\"
        });

        //中间拖拽区的drop事件
        $(\"#divCenter\").droppable({
          scope: \"plant\",
          drop: function (event, ui) {
            // 创建工厂模型到拖拽区
            CreateModel(ui, $(this));
          }
        });
　　　　　　　　});  
 
//1.创建模型（参数依次为：drop事件的ui、当前容器、id、当前样式）
 function CreateModel(ui, selector) {
    //1.1 添加html模型
    var modelid = $(ui.draggable).attr(\"id\");
    i++;
    var id = modelid + i;
    var cur_css = modelid;
    var type = $(ui.helper).attr(\"dbtype\");
    $(selector).append(\'<div class=\"node \' + cur_css + \'\" id=\"\' + id + \'\" dbtype=\"\' + type + \'\" parentid=\"\' + $(selector).attr(\"id\") + \'\" onclick=\"oInitElement.GetPropertiesByType(\\\'\' + type + \'\\\',this)\" ondblclick=\"InitStation().DbClick(\\\'\' + type + \'\\\',this)\" >\' + $(ui.helper).html() + \'</div>\');
    var left = parseInt(ui.offset.left - $(selector).offset().left);
    var top = parseInt(ui.offset.top - $(selector).offset().top);
    $(\"#\" + id).css(\"left\", left).css(\"top\", top);
    //jsPlumb.setContainer($(\"#divCenter\"));
    //1.2 添加连接点
    jsPlumb.addEndpoint(id, { anchors: \"RightMiddle\" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: \"LeftMiddle\" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: \"TopCenter\" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: \"BottomCenter\" }, hollowCircle);
    jsPlumb.draggable(id);

    //1.3 注册实体可draggable和resizable
    $(\"#\" + id).draggable({
      containment: \"parent\",
      start: function () {
        startMove();
      },
      drag: function (event, ui) {
        MoveSelectDiv(event, ui, id);
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
      }
    });

    $(\"#\" + id).resizable({
      resize: function () {
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
        //oInitElement.SendPropRequest(\"DTO_TM_PLANT\", $(this));
      }
    });
    return id;
  };