Question

我知道jQuery和类似的Javascript框架提供了调整大小功能，但我想了解它是如何实现的（如果只是为了了解有关Javascript的更多信息）。

我可以想到一些可以做到的方法，但是如何在实践中实施？ mouseover事件适用于整个元素，那么只有当鼠标悬停在元素的边缘时，如何才允许调整大小？

如果有几种流行的方法可以实现它，它们有何不同？是否有任何明显的限制，Javascript暂时无法解决？

任何详细程度的答案都表示赞赏。此外，如果您可以将我引导到框架源代码中发生“魔法”的相关部分，那么也会受到赞赏，但不是必需的。

Answer 1

我花时间为你写了一个例子。就在这里：

http://blixt.org/js/resize.html

（注意：这可能不适用于所有浏览器，因为我没有花时间确保它与跨浏览器兼容。）

它的作用基本上是它使用mousemove事件来检查光标离元素边缘的距离，如果它足够接近边缘，则显示该边缘的光标。这是JavaScript：

（注意：在一个真实的项目中，为了跨浏览器的兼容性，可维护性和库之间更好的交互，你会对此进行非常不同的编码。你应该使用像jQuery这样的框架，因为它的开发人员已经想到了关于所有这些事情。）

var r = document.getElementById('resizable');
r.onmousemove = function (e) {
    if (!e) e = window.event;

    var
    // Get the distances to all the edges.
    // e.clientX is the X coordinate on the client area (window) of the mouse.
    // r.offsetLeft is the horizontal offset from the page left.
    // r.offsetWidth is the total width of the element.
    left = e.clientX - r.offsetLeft, top = e.clientY - r.offsetTop,
    bottom = r.offsetHeight - top, right = r.offsetWidth - left,
    // Get the shortest distance to any of the edges.
    min = Math.min(Math.min(Math.min(top, left), bottom), right);

    // If the pointer is further than 5 pixels from an edge, do not display
    // any resize cursor.
    if (min > 5) {
        r.style.cursor = 'default';
        return;
    }

    // Determine which cursor to display.
    switch (min) {
        case top:
            r.style.cursor = 'n-resize';
            break;
        case left:
            r.style.cursor = 'w-resize';
            break;
        case bottom:
            r.style.cursor = 's-resize';
            break;
        case right:
            r.style.cursor = 'e-resize';
            break;
    }
}

Answer 2

实际上，调整大小边缘是处理鼠标事件以调整大小的单独元素。

使用普通的旧JavaScript创建调整大小区域会很烦人，我们将不得不为可以使用框架实现的效果编写更多代码。

如何在Javascript中实现大小调整？

2 个答案: