如何双向扩展元素宽度？答案

【问题标题】：How to extend element width both ways?如何双向扩展元素宽度？
【发布时间】：2012-06-21 08:34:31
【问题描述】：

这个标题听起来令人困惑吗？反正我觉得可能还好。

当我点击页面时，我希望他们能够对我进行更短和更长的一行。

你可以在这里看到我的意思：

http://jsfiddle.net/shawn31313/HKLhE/9/show/

执行 Mousedown，他们将您的移动向右移动。它工作正常。但是现在，将鼠标移到左边。看到问题了吗？它的方向与您向右拖动时的方向相同。我知道这是因为我正在使用宽度，显然宽度是一种方式。

这是我目前的代码：

$(document).ready(function() {
    var dragStatus = 0,
        getPos, giveRandomID;
    $(document).mousedown(function(event) {
        dragStatus = 0;
        getPos = {
            top: event.clientY,
            left: event.clientX
        };
        giveRandomID = Math.floor(Math.random() * 99999);
    });
    $(document).mousemove(function() {
        var line = $('#line' + giveRandomID);
        if (dragStatus == 0) {
            $('body').append("<div id='line" + giveRandomID + "' class='line' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>");
            dragStatus = 1;
        }
        if (dragStatus == 1) {
            if (event.clientX > line.offset().left) {
                line.css({
                    width: event.clientX - line.offset().left
                });
            } else {
                line.css({
                    width: line.offset().left - event.clientX
                });
            }
            //for DEG  "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2)
        }
    });
    $(document).mouseup(function() {
        dragStatus = 2;
    });
});

我希望有人可以帮助我解决这个问题。也许是一种完全不同的设置方式。只是为了解决这个问题

【问题讨论】：

标签： javascript jquery position width drag

【解决方案1】：

要使线向左延伸，您必须更新left 属性：

        if (event.clientX > getPos.left) {
            line.css({
                left: getPos.left,
                width: event.clientX - getPos.left
            });
        } else {
            line.css({
                left: event.clientX,
                width: getPos.left - event.clientX
            });
        }

jsFiddle：http://jsfiddle.net/HKLhE/16/

【讨论】：

另外，您应该将dragStatus 初始化为2，以避免在绘制第一行之前出现在控制台中的JavaScript错误（实际上，您可能根本不需要dragStatus - 您可以检查getPos 并检查该行是否存在），这样创建时可能不需要设置该行的left（因为它会立即设置）。

【解决方案2】：

您需要修改else 大小写（向右移动）以将left 属性设置为auto，并将right 属性设置为初始鼠标单击X 位置。向左移动时与 offset().left 相比将不起作用，因为该值正在发生变化。

试试这个尺寸：

http://jsfiddle.net/HKLhE/20/

编辑：Billiand 的解决方案要优雅得多。

【讨论】：