当我们需要在web页面中展示关系图谱或交互式地连接两个元素时，我们经常需要在不同元素之间绘制一条线。本文将介绍如何使用CSS来实现这样的效果，其中涉及到用JavaScript和CSS设置元素位置和尺寸、尺寸单位、CSS伪元素等知识点。
HTML结构
首先，我们需要一个包含两个可拖动的DIV的HTML结构，这里我们把它们分别命名为“div1”和“div2”。它们可以是任意内容，这里为了方便演示给它们添加了一些文字和颜色。
<div class="draggable" id="div1">我是第一个可拖动的DIV</div> <div class="draggable" id="div2">我是第二个可拖动的DIV</div>
CSS布局
接下来，我们需要使用CSS来设置这两个DIV的位置和尺寸，并使它们可拖动。这里我们使用了flex布局和绝对定位来实现这个效果。
-- -------------------- ---- ------- ---- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ---------- - --------- --------- ------ ------ ------- ------ ----------------- ----- -------------- ----- ----------- ------- ------- ----- - ----- - ---- ---- ----- ---- ---------- --------------- ------ - ----- - ---- ---- ----- ---- ---------- --------------- ------ -
这里我们把两个DIV相对于页面居中，并设置它们的高度、宽度、背景颜色和圆角等样式。然后，我们使用绝对定位将它们放在想要的位置上，并使它们可拖动。
用CSS画线
现在，我们需要在这两个DIV之间画一条线。使用CSS实现这个效果的方法是，创建一个伪元素，将其定位在两个DIV的中心，然后使用CSS属性transform来旋转它以及height和border-bottom属性来设置线的长度和宽度。
-- -------------------- ---- ------- ------------------ - -------- --- --------- --------- ---- ---- ----- -- ------ ---- ------- ---- ----------------- ----- ----------------- --- ----- ---------- --------------- - ----------------- - -------- --- --------- --------- ---- ---- ------ -- ------ ---- ------- ---- ----------------- ----- ----------------- --- ------ ---------- -------------- -
这里我们创建了两个伪元素::before和::after，并分别将它们定位在两个DIV的中心。我们使用transform-origin属性来设置旋转的基准点，并使用transform属性将它们旋转到正确的角度。最后使用height和border-bottom属性分别设置线的长度和宽度。
JavaScript实现拖动
现在，我们已经实现了用CSS画线的效果，但是我们还需要实现让这两个DIV可拖动的功能。可以使用JavaScript和CSS的结合，在鼠标移动时改变元素的位置。
-- -------------------- ---- -------
--- ---------- - ------
--- ---------- - -----
--- ------- - --
--- ------- - --
-------------------------------------- -------- ------- -
-- ---------------------------------------------- -
---------- - -----
---------- - -------------
------- - ------------- - ----------------------
------- - ------------- - ---------------------
-
---
-------------------------------------- -------- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------