如何用柔性线连接div [重复]
Posted
技术标签:
【中文标题】如何用柔性线连接div [重复]【英文标题】：How to connect div with flexible line [duplicate] 【发布时间】：2017-12-27 00:36:30 【问题描述】：我有一些动态可拖动的 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>
【问题讨论】：
你最好在 photoshop 中创建这条灵活的线条，然后将其作为图像插入。如果你想在 css 中创建它，只意味着你需要使用简单的 SVG 但是我想在指向两个 div 或取消指向两个 div 时执行一些事件（例如连接两个 div 或断开两个 div 时的数据库条目） 所以应该只有一条线将两个div绑定在一起，有点像链子，它们是通过链子连接的？而且这条线/链不允许是直的，它应该是弯曲的？而且这条曲线有实际用途，还是只是为了美观？ 是的，像这样。但是线条会随着 div 的移动而动态弯曲。它也是一种决策层次结构 @myfunkyside 你对 mautic 工具有什么想法吗？ 【参考方案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
【讨论】：
Yashvantsinh Zala 你的例子非常棒你能帮我实现这个吗？ ***.com/questions/51120991/…以上是关于如何用柔性线连接div [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何用console线连接路由器进行初始配置-----无私奉献版（转载请注明出处）