使用jQuery和LeaderLine连接div元素

我想通过右边/左边的连接器连接

div

元素。这些连接器只不过是一个带有

class=“entry connector”

或

class=“exit connector”

的

div

，其中包含一个

，在较旧的SO帖子中被推荐为连接JavaScript（）中元素的通用工具。我的理解是，如果我设法保存对两个单击的元素（即开始和结束连接器）的引用，我可以简单地调用
.connections（）
函数来连接它们。我想使用前面提到的
活动连接器
类来执行此操作：

$(".active-connector").connections();

不幸的是，我的方法似乎都没有产生任何效果。我创建的连接器是可单击的，但单击后不会发生任何事情（动画不会启动）。我假设
“活动连接器”
类可能不会添加到单击的元素中，因此，LeaderLine也无法识别要连接的元素

完整代码：


$（文档）.ready（函数（e）{
$（“.exit create”）。单击（函数（e）{
$（“.container”）.append（'Indicator12'）；
$（“.indi-box”）.draggable({
约束：“.container”，
遏制：“家长”
});
});
$（“.entry create”）。单击（函数（e）{
$（“.container”）.append（'Indicator12'）；
$（“.indi-box”）.draggable({
约束：“.container”，
遏制：“家长”
});
});
//$（“.indi-box”）。单击（函数（e）{
//变量clickedConnector=$（e.target）；
//单击connector.classList.add（“活动连接器”）；
//});
//$（“.active connector”）.connections（）；
});
#下拉列表{
边缘：2米；
}
.集装箱{
高度：50vw；
宽度：90vw；
背景色：粉蓝色；
边框：2倍纯色灰色；
}
.独立盒子{
背景色：#336DFF；
显示：内联块；
边缘：0.5em；
}
.入口连接器{
边框：1px实心#000000；
高度：12px；
宽度：6px；
背景颜色：绿色；
位置：绝对位置；
最高：50%；
左：0%；
转换：翻译（0%，-50%）；
}
.出口连接器{
边框：1px实心#000000；
高度：12px；
宽度：6px；
背景颜色：蓝色；
位置：绝对位置；
最高：50%；
左：100%；
转换：翻译（-100%，-50%）；
}
.有源连接器{
-webkit动画：连接器-活动1s无限；
/*狩猎4+*/
-moz动画：连接器-活动1s无限；
/*外汇5+*/
-o-动画：连接器-活动1s无限；
/*歌剧院12+*/
动画：连接器-活动1s无限；
/*IE 10+，Fx 29+*/
}
@-webkit关键帧连接器-激活{
0%,
49% {
不透明度：0.5；
}
50%,
100% {
不透明度：1.0；
}

创建退出Indi
创建条目索引
首先，您的
独立框是动态创建的，因此您需要将其与一些静态元素绑定，以便进行更改，即：
$（“.container”）。在（“单击“，”.indi-box”，函数（e）{..}）

接下来，有两个div，即：entry和exit。现在，用户应该首先选择entrydiv，以便您可以检查单击的div是否为entry，以及是否有任何其他已选择的entry div，这取决于此将您的类添加到entry div，否则将显示一些消息（警报）

最后，用户也可以首先单击exit div，这样您就可以检查是否选择了任何entry div，具体取决于此显示一些消息（警报），否则只需使用entry and exit div的
id
，并将其传递到
新的LeaderLine（此处..）
中即可在它们之间建立连接

演示代码：


$（文档）.ready（函数（e）{
$（“.exit create”）。单击（函数（e）{
变量长度=$（“.indi-box”）。长度+1
$（“.container”）.append（'Indicator12'）；
$（“.indi-box”）.draggable({
约束：“.container”，
遏制：“家长”
});
});
$（“.entry create”）。单击（函数（e）{
变量长度=$（“.indi-box”）。长度+1
$（“.container”）.append（'Indicator12'）；
$（“.indi-box”）.draggable({
约束：“.container”，
遏制：“家长”
});
});
//一次单击indi box
$（“.container”）。在（“单击”，“独立框”，函数（e）{
//检查所单击的div是否具有条目connctr
if（$（this）.find（“.entry connector”）.length>0）{
如果（$（“.active connector”）.length==0）{
$（this）.toggleClass（“活动连接器”）；//在那里添加类
}否则{
警报（“您已经选择了一个条目，请为其选择退出”）
}
}否则{
//检查是否已选择一个条目
如果（$（“.active connector”）.length>0）{
var start=$（“.active connector”）.attr（'id'）
//联系
新的领导行（$（'#'+start）[0]，$（'#'+$（this.attr（“id”）[0]）
$（“.indi-box”）.removeClass（“活动连接器”）//已删除的类
}否则{
警报（“请先选择条目”）
}
}
});
})；
#下拉列表{
边缘：2米；
}
.集装箱{
高度：50vw；
宽度：90vw；
背景色：粉蓝色；
边框：2倍纯色灰色；
}
.独立盒子{
背景色：#336DFF；
显示：内联块；
边缘：0.5em；
}
.入口连接器{
边框：1px实心#000000；
高度：12px；
宽度：6px；
背景颜色：绿色；
位置：绝对位置；
最高：50%；
左：0%；
转换：翻译（0%，-50%）；
}
.出口连接器{
边框：1px实心#000000；
高度：12px；
宽度：6px；
背景颜色：蓝色；
位置：绝对位置；
最高：50%；
左：100%；
转换：翻译（-100%，-50%）；
}
.有源连接器{
-webkit动画：连接器-活动1s无限；
/*狩猎4+*/
-moz动画：连接器-活动1s无限；
/*外汇5+*/
-o-动画：连接器-活动1s无限；
/*歌剧院12+*/
动画：连接器-活动1s无限；
/*IE 10+，Fx 29+*/
}
@-webkit关键帧连接器-激活{
0%,
49% {
不透明度：0.5；
}
50%,
100% {
不透明度：1.0；
}

创建退出Indi
创造
$(".active-connector").connections();