如何使用灵活线
我有一些动态可拖动的DIV，我想通过灵活的动态线路将DIV相互连接起来。该线应该是动态可连接的或可移动的。那么我怎样才能实现目标呢？ 此外，我想对连接/删除事件执行操作。
下面我试图通过图像描述我的情况：
最终目标是这样的，给你一个想法：
如何通过svg或flexbox或jQuery或CSS技巧进行此类灵活线路？任何人都可以建议任何方法来实现这一目标。
我当前的HTML / CSS / JS看起来像这样：
<html>
<head>
<title>Dragable </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.min.css" rel="stylesheet"><!--//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/-->
<link href="jquery-ui.css" type="text/css" rel="stylesheet" media="all"><!--//code.jquery.com/ui/1.10.1/themes/base/-->
<style>
@import url(http://fonts.googleapis.com/css?family=Antic+Slab);
.ui-draggable-dragging {
z-index: 10000!important;
}
html,body {
height:100%;
}
h1 {
font-family: 'Antic Slab', serif;
font-size:80px;
color:#DDCCEE;
}
.lead {
color:#DDCCEE;
}
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
min-height:100%;
background-color:#110022;
color:#eee;
overflow:hidden;
}
.container-full a {
color:#efefef;
text-decoration:none;
}
.v-center {
margin-top:7%;
}
.panel {
background-color: yellow;
}
.panel-droppable {
width: 275px;
height: 200px;
border: solid 1px black;
background-color: grey;
}
</style>
<script type='text/javascript' src="jquery.min.js"></script><!--//ajax.googleapis.com/ajax/libs/jquery/2.0.2/-->
<script type='text/javascript' src="jquery-ui.js"></script><!--//code.jquery.com/ui/1.10.1/-->
<script type='text/javascript' src="bootstrap.min.js"></script><!--//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/-->
<script async type="text/javascript" src="carbon.js?zoneid=1673&serve=C6AILKT&placement=bootplycom" id="_carbonads_js"></script><!--//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bootplycom-->
<script type="text/javascript">
$(document).ready(function () {
$('.panel').draggable();
$('#hellolanding').draggable();
$('.panel-droppable').droppable()
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><h3>Drag 1</h3></div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><h3>Drag 2</h3></div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><h3>Drag 3</h3></div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><h3>Drag 4</h3></div>
</div>
</div>
</div>
</div> <!-- /container full -->
</body>
</html>
1 个答案:
答案 0 :(得分：1)
查看此演示。我希望它对实现你的目标很有帮助
<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="./include/jquery.jsPlumb-1.3.16-all-min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<style>
.window {
background-color: #EEEEEF;
border: 1px solid #346789;
border-radius: 0.5em;
box-shadow: 2px 2px 5px #AAAAAA;
color: black;
height: 5em;
position: absolute;
width: 5em;
}
.window:hover {
box-shadow: 2px 2px 19px #AAAAAA;
cursor: pointer;
}
.button_add, .button_add_window, .button_remove, .button {
background-color: deepskyblue;
text-align: center;
border: 1px solid;
}
.button_container {
margin: 5px;
background-color: #aaaaaa
}
svg.fs-connector path {
stroke: lightgray;
fill: lightgray;
stroke-width: 3;
}
svg.fs-connector-hover path {
stroke: gray;
fill: gray;
stroke-width: 3;
}
</style>
<script>
jsPlumb.ready(function () {
//all windows are draggable
jsPlumb.draggable($(".window"), {
drag: function (event, ui) { //gets called on every drag
console.log(ui.position); //ui.position.left and ui.position.top
}});
var anEndpointSource = {
endpoint: "Rectangle",
isSource: true,
isTarget: false,
maxConnections: -1,
anchor: [1, 0, 1, 0]
};
var anEndpointDestination = {
endpoint: "Dot",
isSource: false,
isTarget: true,
maxConnections: -1,
connectorStyle: {
dashstyle: "2 4"
},
anchor: [0, 1, -1, 0]
};
var parentnode1 = $(("#container0"));
jsPlumb.addEndpoint(
parentnode1, {
/* Connector(Line)-Style */
connectorStyle: {strokeStyle: "blue", lineWidth: 1},
connectorHoverStyle: {lineWidth: 2},
// connectorOverlays: [
// ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
// ["Label", {label: "foo", id: "label"}]
// ]
},
anEndpointSource,
);
jsPlumb.addEndpoint(
parentnode1, {
/* Connector(Line)-Style */
connectorStyle: {strokeStyle: "blue", lineWidth: 1},
connectorHoverStyle: {lineWidth: 2},
// connectorOverlays: [
// ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
// ["Label", {label: "foo", id: "label"}]
// ]
},
anEndpointDestination,
);
fixEndpoints(parentnode1);
//Fixes endpoints for specified target
function fixEndpoints(parentnode) {
//get list of current endpoints
var endpoints = jsPlumb.getEndpoints(parentnode);
//there are 2 types - input and output
var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isSource; //input
});
var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isTarget; //output
});
calculateEndpoint(inputAr, true);
calculateEndpoint(outputAr, false);
jsPlumb.repaintEverything();
}
//recalculate endpoint anchor position manually
function calculateEndpoint(endpointArray, isInput) {
//multiplyer
var mult = 1 / (endpointArray.length + 1);
for (var i = 0; i < endpointArray.length; i++) {
if (isInput) {
//position
endpointArray[i].anchor.x = 1;
endpointArray[i].anchor.y = mult * (i + 1);
} else {
//position
endpointArray[i].anchor.x = 0;
endpointArray[i].anchor.y = mult * (i + 1);
}
}
}
//Add additional anchor
$(".button_add").live("click", function () {
var parentnode = $(this)[0].parentNode.parentNode;
jsPlumb.addEndpoint(
parentnode,
anEndpointSource
);
jsPlumb.addEndpoint(
parentnode,
anEndpointDestination
);
fixEndpoints(parentnode);
});
//Remove anchor
$(".button_remove").live("click", function () {
var parentnode = $(this)[0].parentNode.parentNode;
//get list of current endpoints
var endpoints = jsPlumb.getEndpoints(parentnode);
//remove 2 last one
if (endpoints.length > 1) {
jsPlumb.deleteEndpoint(endpoints[endpoints.length - 2]);
}
if (endpoints.length > 0) {
jsPlumb.deleteEndpoint(endpoints[endpoints.length - 1]);
}
fixEndpoints(parentnode);
});
//adds new window
$(".button_add_window").click(function () {
var id = "dynamic_" + $(".window").length;
var tagName = "Tag - " + $(".window").length;
//create new window and add it to the body
$('<div class="window" id="' + id + '" >').appendTo('body').html($(("#container0"))[0].innerHTML);
//set jsplumb properties
jsPlumb.draggable($('#' + id), {
drag: function (event, ui) { //gets called on every drag
console.log(ui.position); //ui.position.left and ui.position.top
}});
$('#' + id).html(tagName);
var parentnode = $('#' + id);
jsPlumb.addEndpoint(
parentnode, {
/* Connector(Line)-Style */
connectorStyle: {strokeStyle: "green", lineWidth: 1},
connectorHoverStyle: {lineWidth: 2},
// connectorOverlays: [
// ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
// ["Label", {label: "foo", id: "label"}]
// ]
},
anEndpointSource
);
jsPlumb.addEndpoint(
parentnode, {
/* Connector(Line)-Style */
connectorStyle: {strokeStyle: "green", lineWidth: 1},
connectorHoverStyle: {lineWidth: 2},
// connectorOverlays: [
// ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
// ["Label", {label: "foo", id: "label"}]
// ]
},
anEndpointDestination
);
fixEndpoints(parentnode);
});
});
</script>
</head>
<body >
<!-- Adds new windows to the page -->
<div class="window" style="left: 600px" id="details">
<p style="text-align: center">Window</p>
<div class="button_container">
<div class="button_add_window">Add</div>
</div>
</div>
<!-- Primary window - used as html templated for descendants -->
<div class="window" style="left: 20px" id="container0">
Tag - 1
<!-- <div class="button_container">
<div class="button_add">Add</div>
<div class="button_remove">Remove</div>
</div>-->
</div>
<!-- <div class="window" style="left: 200px" id="container1">
</div>-->
</body>
</html>
有关详细信息，请访问http://www.freedevelopertutorials.com/jsplumb-tutorial/或https://jsplumbtoolkit.com
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？