2
我正在創建一個關係編輯器。用戶創建一些元素，並能夠將它們鏈接起來創建關係（雙向）。我創建了第一部分（用戶創建元素）。例如，當用戶雙擊一個元素時，現在我需要創建連接兩個DIV的線。創建連接兩個DIV的線
我知道可能有幾種方法來做到這一點，但實際上我不知道如何啓動它。 什麼是起點？
$(function() {
$("#BtInsert").button()
.click(function() {
var pad = "000000"
var cor = "" + Math.floor(Math.random() * 16777215).toString(16);
cor = "#" + pad.substring(0, pad.length - cor.length) + cor;
var newDIV = document.createElement('div');
$(newDIV).addClass("base")
.appendTo($("#container"))
.html('N')
.dblclick(function() {
alert('Want to start to create a line from this div to another double click');
})
.draggable({
containment: "parent"
})
.css({
left: Math.floor(Math.random() * ($("#container").width() - $(".base").width())),
top: Math.floor(Math.random() * ($("#container").width() - $(".base").width()))
})
.css("background-color", cor);
})
});#BtInsert {
top: 405px;
width: 400px;
position: absolute;
}
body {
margin: 0px;
padding: 0px;
}
#container {
border: solid 1px #CCC;
width: 400px;
height: 400px;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: whitesmoke;
}
.base {
height: 50px;
width: 50px;
top: 30px;
left: 30px;
border-radius: 25px;
box-shadow: 2px 2px 2px #888888;
vertical-alignment: middle;
line-height: 50px;
text-align: center;
margin-bottom: 5px;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
color: white;
background-color: #CCC;
cursor: pointer;
-webkit-transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
float: left;
position: absolute;
z-index: 0;
}
.base:hover {
z-index: 1000;
color: #333;
width: 80px;
height: 80px;
border-radius: 50px;
line-height: 80px;
box-shadow: 4px 4px 4px #888888;
-webkit-transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
}<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
</div>
<a href="#" id="BtInsert">
Insert an element
</a>
你的問題是不是一個完全重複，因爲你要求動態創建線，但你可以看看[這個答案]（http://stackoverflow.com/questions/28021014/how-do-you-draw -a-line-from-a-border/28021250＃28021250）瞭解如何創建線條的想法。 – Harry