如何使用JQuery在2个元素之间绘制一条线并刷新该线？

我正在使用JQuery-UI draggables和droppables将元素克隆到div上。 使用JQuery在页面上的元素之间绘制线条的最佳方法是什么。

刷新页面线条的最佳方法是什么？ 我将在页面上有多行，只想更新特定行而不是刷新每一行。

Answer 1

我现在有这个工作。

根据我的经验，不要使用jquery.svg，它可能是解决它的压力，而不是学习我的方式绕过另一个插件，但我发现它比它的价值更麻烦，并导致兼容性问题。

可以使用HTML5canvas和excanvas兼容性脚本以及一个很棒的html5演练来解决，但是由于HTML5canvas的工作方式，它要求canvas上的所有linse都被破坏并重新绘制，如果需要删除一行或者它职位需要更新。

我在其间绘制线条的元素位于表示关系的父元素内。 子元素代表一个开始和结束，所以我可以通过使用例如$('.relationshipClass')获取父母的集合来重绘所有这些关系，并询问集合元素的子元素以获得行的点。
要使用此代码，您必须提出一种方法，以便轻松获取可用于重绘的线点。

标记：
很好很简单，一个html

来保存（最可能是JQuery UI draggables）之间的任何元素，以及一个位于相同位置的

CSS：
不要使用CSS控制元素的宽度，请参阅Canvas streching上的问题 。 将放在与

相同的位置并在其后面（使用z-index），这将显示

后面的行，并阻止阻止任何拖放交互

的孩子们。

 canvas { background-color: #FFFFFF; position: absolute; z-index: -10; /* control height and width in code to prevent stretching */ } 

Javascript方法：
创建实用程序方法：示例代码位于JQuery插件中 ，该插件包含：

• 一个帮助函数来重置canvas（更改宽度将删除所有
• 辅助函数，用于在两个元素之间绘制线条
• 在需要一个元素的所有元素之间绘制线条的函数

添加新线或调整线的位置时，将销毁现有线并绘制所有线。 您可以将下面的代码放入常规函数中或作为插件保留。

Javascript代码：
NB在匿名化后未经过测试。

 $(document).ready(function () { $.fn.yourExt = { _readjustHTML5CanvasHeight: function () { //clear the canvas by readjusting the width/height var html5Canvas = $('#html5CanvasId'); var canvasDiv = $('#divCanvasId'); if (html5Canvas.length > 0) { html5Canvas[0].width = canvasDiv.width(); html5Canvas[0].height = canvasDiv.height(); } } , //uses HTML5  to draw line representing relationship //IE support with excanvas.js _drawLineBetweenElements: function (sourceElement, targetElement) { //draw from/to the centre, not the top left //don't use .position() //that will be relative to the parent div and not the page var sourceX = sourceElement.offset().left + sourceElement.width() / 2; var sourceY = sourceElement.offset().top + sourceElement.height() / 2; var targetX = targetElement.offset().left + sourceElement.width() / 2; var targetY = targetElement.offset().top + sourceElement.height() / 2; var canvas = $('#html5CanvasId'); //you need to draw relative to the canvas not the page var canvasOffsetX = canvas.offset().left; var canvasOffsetY = canvas.offset().top; var context = canvas[0].getContext('2d'); //draw line context.beginPath(); context.moveTo(sourceX - canvasOffsetX, sourceY - canvasOffsetY); context.lineTo(targetX - canvasOffsetX, targetY - canvasOffsetY); context.closePath(); //ink line context.lineWidth = 2; context.strokeStyle = "#000"; //black context.stroke(); } , drawLines: function () { //reset the canvas $().yourExt._readjustHTML5CanvasHeight(); var elementsToDrawLinesBetween; //you must create an object that holds the start and end of the line //and populate a collection of them to iterate through elementsToDrawLinesBetween.each(function (i, startEndPair) { //dot notation used, you will probably have a different method //to access these elements var start = startEndPair.start; var end = startEndPair.end; $().yourExt._drawLineBetweenElements(start, end); }); } 

您现在可以从事件处理程序（例如JQuery UI的拖动事件 ）调用这些函数来绘制线条。

Answer 2

使用1px高度设置背景制作hr或div，并在需要时使用jquery为其宽度设置动画。