Question

我有一个包含一些按钮的块，我希望用户能够按他/她的意愿连接元素。连接器可以是svg，也可以假定元素可以拖动

我想要下面这样的东西

到目前为止，我拥有的是jsfidle demo

HTML

<div class="elm">Div 1</div>
<div class="elm">Div 2</div>
<div class="elm">Div 3</div>
<div class="elm">Div 4</div>
<div class="elm">Div 5</div>
<div class="elm">Div 6</div>
<div class="elm">Div 7</div>
<div class="elm">Div 8</div>
<div class="elm">Div 9</div>

JS

$(document).on("click", "div.elm", function(){
  if ($(this).hasClass("connected")) return;

  if ($(this).hasClass("highlight")) {
    $(this).removeClass("highlight");
    return;
  }

  if ($("div.highlight").length == 0) { 
    $(this).addClass("highlight");
  } else if (!$(this).hasClass("connected")) {
    // there's one clicked already so lets connect em
    var div_1 = $("div.highlight")
    var pos_1 = div_1.position();
    var div_2 = $(this)
    var pos_2 = div_2.position();
    if (pos_1.top == pos_2.top) {
      // same row
      if (Math.abs(pos_1.left - pos_2.left) == 100) {
        // adjacent
          var bar = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top - 2 + div_1.height() / 2) + "px", "height" : "5px", "width" : "50px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 50) + "px" });
          $("body").append(bar);          
      } else {
        // same row not adjacent
          var bar1 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 50) + "px", "height" : "20px", "width" : "5px",  "left" : (pos_1.left - 2 + div_1.width() / 2) + "px"});
          var bar2 = bar1.clone().css({"left" : (pos_2.left - 2 + div_2.width() / 2) + "px"});
          var bar3 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 65) + "px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 25) + "px", "width" : "200px", "height" : "5px" });
          $("body").append(bar1).append(bar2).append(bar3);
      }
    } else if (pos_1.left == pos_2.left) {
      // same column
      if (Math.abs(pos_1.top - pos_2.top) == 100) {
        // adjacent
          var bar = $("<div></div>").addClass("connectbar").css({ "top" : ((pos_1.top > pos_2.top ? pos_2.top : pos_1.top) + 50) + "px", "height" : "50px", "width" : "5px", "left" : (pos_1.left - 2 + div_1.width() / 2) + "px" });
          $("body").append(bar);          
      } else {
        // same column not adjacent
          var bar1 = $("<div></div>").addClass("connectbar").css({ "left" : (pos_1.left + 50) + "px", "height" : "5px", "width" : "20px",  "top" : (pos_1.top - 2 + div_1.height() / 2) + "px"});
          var bar2 = bar1.clone().css({"top" : (pos_2.top - 2 + div_2.height() / 2) + "px"});
          var bar3 = $("<div></div>").addClass("connectbar").css({ "left" : (pos_1.left + 65) + "px", "top" : ((pos_1.top > pos_2.top ? pos_2.top : pos_1.top) + 25) + "px", "width" : "5px", "height" : "200px" });
          $("body").append(bar1).append(bar2).append(bar3);
      }
    }
    div_1.removeClass("highlight").addClass("connected");
    div_2.addClass("connected");
  }    
});

Css

div.elm { 
    float:left; 
    width:50px; 
    height:50px; 
    background-color:#9F9;
    margin-right:50px;
    margin-bottom:50px;
}

div.elm:nth-of-type(3n + 1) { clear:left; }
div.elm:nth-of-type(3n) { margin-right:0px; }
div.highlight { background-color:#F99; }
div.connected { background-color:#99F; }
div.connectbar { 
    position : absolute; 
    z-index : 10; 
    background-color:#66C;
}

到目前为止，我的演示正在连接同一行中的唯一元素，我无法按照我想要的方式进行连接。

要获得所需的结果，我需要更改什么？或是否有任何插件可以解决我的问题？？任何帮助或建议将不胜感激

通过用户使用Jquery连接元素

0 个答案: