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

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

最佳答案

我现在可以正常工作了。

根据我的经验，不要使用 jquery.svg，这可能是在不学习其他插件的情况下解决它的压力，但我发现它比它的值(value)更麻烦，并且会导致兼容性问题。

可以使用 HTML5 canvas 和 excanvas compatibility script 来解决, 和 a great html5 walkthrough , 但由于 HTML5 canvas 的工作方式，如果需要删除一行或需要更新其位置，则需要销毁并重新绘制 Canvas 上的所有 linse。

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

标记:
漂亮而简单，一个 html <div>保存在(最有可能是 JQuery UI 可拖动对象)和 <canvas> 之间绘制的任何元素那将处于相同的位置

 <div id="divCanvasId" class="divCanvasClass"></div>
 <canvas id="html5CanvasId"></canvas>

CSS:
不要控制 <canvas> CSS 元素的宽度，参见 Question on Canvas streching .定位 <canvas>在与 <div> 相同的位置在它后面(使用 z-index)，这将显示 <div> 后面的行并防止 <canvas>阻止与 <div> 的任何拖放交互的 child 。

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

Javascript 方法:
创建实用程序方法:示例代码在 JQuery plugin 中包含:

• 重置 Canvas 的辅助函数(改变宽度将删除所有
• 在两个元素之间画线的辅助函数
• 一个在所有需要一个元素之间画线的函数

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

Javascript 代码:
注意匿名后未测试。

$(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 <canvas> 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's drag event)调用这些函数来绘制线条。

关于javascript - 如何使用 JQuery 在 2 个元素之间画一条线并刷新该线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4712189/