拖拽改变宽高

最新推荐文章于 2024-06-07 18:10:23 发布

原创最新推荐文章于 2024-06-07 18:10:23 发布 · 523 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript点滴知识专栏收录该内容

126 篇文章

订阅专栏

这篇博客详细介绍了如何利用JavaScript实现拖拽功能来动态改变网页元素的宽度和高度。通过监听鼠标事件，结合元素的坐标计算，实现了在用户拖动时实时更新元素尺寸的效果，为用户提供更直观的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * Created by Spades-k on 2016/8/17.
 */
define('h5/js/page/dragFn', [
    'jquery'
],function($){
    //要改变的div,拖拽的边，
    var dragBox=function(oParent, handle, isLeft, isTop, lockX, lockY)
    {
        var oParent=document.getElementById(oParent),
            handle=document.getElementById(handle),
            dragMinWidth = 250,
            dragMinHeight = 124;
        handle.onmousedown = function (event)
        {
            var event = event || window.event;
            var disX = event.clientX - handle.offsetLeft;
            var disY = event.clientY - handle.offsetTop;
            var iParentTop = oParent.offsetTop;
            var iParentLeft = oParent.offsetLeft;
            var iParentWidth = oParent.offsetWidth;
            var iParentHeight = oParent.offsetHeight;

            document.onmousemove = function (event)
            {
                var event = event || window.event;

                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
                var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;
                var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
                var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;

                isLeft && (oParent.style.left = iParentLeft + iL + "px");
                isTop && (oParent.style.top = iParentTop + iT + "px");

                iW < dragMinWidth && (iW = dragMinWidth);
                iW > maxW && (iW = maxW);
                lockX || (oParent.style.width = iW + "px");

                iH < dragMinHeight && (iH = dragMinHeight);
                iH > maxH && (iH = maxH);
                lockY || (oParent.style.height = iH + "px");

                if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;

                return false;
            };
            document.onmouseup = function ()
            {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        }
    }
    return {dragBox:dragBox};
})