jquery - 将一个 div 放入另一个 div 中，用一条线将两者连接起来

Question

我正在尝试使用 jquery 准备组织结构图，并且我需要在团队成员之间创建层次结构。所有联系人成员都表示为可拖动的 div，我想要的是当一个联系人 div 放入另一个联系人 div 时，会在这两个 div 之间创建一个层次结构，其中放置的 div 是子级。 关于如何在 jquery 中执行 drop-to-connect-divs 的任何想法

提前致谢

问候， 阿卡什

Answer 1

使用:

• jQuery 1.9.1
• jQuery UI 1.9.2

我生成了以下示例:JSFiddle .

<div id="droppable" class="ui-widget-header">
    <p>Drop Zone</p>
</div>
<div id="div1">&nbsp;</div>
<div id="div2">&nbsp;</div>

/** Converts numeric degrees to radians */
if (typeof (Number.prototype.toRad) === 'undefined') {
    Number.prototype.toRad = function () {
        return this * Math.PI / 180;
    }
}

/** Converts numeric radians to degrees */
if (typeof (Number.prototype.toDeg) === 'undefined') {
    Number.prototype.toDeg = function () {
        return this * 180 / Math.PI;
    }
}

$(function () {
    $("#div1").draggable();
    $("#droppable").droppable({
        drop: function (event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
            handleConnectDivs();
        }
    });
});

// Button listener.
function handleConnectDivs() {
    var div1 = $('#div1')[0];
    var div2 = $('#div2')[0];

    connect(div1, div2, '#007F00', 2, 3);
}

// Connect 2 divs with a line.
function connect(div1, div2, color, thickness, z) {
    var p1 = findCenter(div1);
    var p2 = findCenter(div2);
    var length = lineDistance(p1, p2);
    var x = ((p1.x + p2.x) / 2) - (length / 2);
    var y = ((p1.y + p2.y) / 2) - (thickness / 2);
    var angle = Math.atan2((p1.y - p2.y), (p1.x - p2.x)).toDeg();
    var htmlLine = generateLine(length, angle, color, thickness, x, y, z);

    $('body').append(htmlLine);
}

// Get the top and left offsets for each div.
function getOffset(el) {
    var _x = 0;
    var _y = 0;
    var _w = el.offsetWidth | 0;
    var _h = el.offsetHeight | 0;
    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }

    return {
        'top': _y,
        'left': _x,
        'width': _w,
        'height': _h
    };
}

// Find the center point for a div.
function findCenter(div) {
    var off = getOffset(div);

    return {
        'x': off.left + off.width / 2,
        'y': off.top + off.height / 2
    };
}

// Line distance equation.
function lineDistance(point1, point2) {
    var dx = point2.x - point1.x;
    dx *= dx;

    var dy = point2.y - point1.y;
    dy *= dy;

    return Math.sqrt(dx + dy);
}

// Generate a line div.
function generateLine(length, angle, color, thickness, x, y, zIndex) {
    return '<div style="padding:0px; margin:0px; height:' + thickness +
        'px; background-color:' + color +
        '; line-height:1px; position:absolute; left:' + x + 'px; top:' +
        y + 'px; width:' + length + 'px; ' + rotationStyle(angle) +
        ' z-index:' + zIndex + ';" />';
}

function rotationStyle(angle) {
    return '-moz-transform:rotate(' + angle + 'deg); ' +
        '-webkit-transform:rotate(' + angle + 'deg); ' +
        '-o-transform:rotate(' + angle + 'deg); ' +
        '-ms-transform:rotate(' + angle + 'deg); ' +
        'transform:rotate(' + angle + 'deg);';
}

#div1 {
    position: absolute;
    background-color: blue;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 18px;
    opacity: 0.9;
}
#div2 {
    position: absolute;
    background-color: red;
    width: 50px;
    height: 50px;
    top: 80px;
    left: 240px;
    opacity: 0.9;
}
#droppable {
    position: absolute;
    top: 12px;
    left: 80px;
    width: 200px;
    height: 150px;
    padding: 0.5em;
    margin: 10px;
}