jquery实现拖拽调整Div大小

今天写了一天这个jquery插件:

可以实现对div进行拖拽来调整大小的功能。

代码如下:

(function ($) {
    $.fn.dragDivResize = function () {
        var deltaX, deltaY, _startX, _startY;
        var resizeW, resizeH;
        var size = 20;
        var minSize = 10;
        var scroll = getScrollOffsets();
        var _this = this;
        for (var i = 0; i < _this.length; i++) {
            var target = this[i];
            $(target).on("mouseover mousemove", overHandler);
        }
        function outHandler() {
            for (var i = 0; i < _this.length; i++) {
                target.style.outline = "none";
            }
            document.body.style.cursor = "default";
        }
        function overHandler(event) {
            target = event.target || event.srcElement;
            var startX = event.clientX + scroll.x;
            var startY = event.clientY + scroll.y;
            var w = $(target).width();
            var h = $(target).height();
            _startX = parseInt(startX);
            _startY = parseInt(startY);
            if ((0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size) || (0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size)) {
                target.style.outline = "2px dashed #333";
                if ((0 > target.offsetLeft + w - _startX || target.offsetLeft + w - _startX > size) && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) {
                    resizeW = false;
                    resizeH = true;
                    document.body.style.cursor = "s-resize";
                }
                if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && (0 > target.offsetTop + h - _startY || target.offsetTop + h - _startY > size)) {
                    resizeW = true;
                    resizeH = false;
                    document.body.style.cursor = "w-resize";
                }
                if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) {
                    resizeW = true;
                    resizeH = true;
                    document.body.style.cursor = "se-resize";
                }
                $(target).on('mousedown', downHandler);
            } else {
                resizeW = false;
                resizeH = false;
                $(target).off('mousedown', downHandler);
            }
        }
        function downHandler(event) {
            target = event.target || event.srcElement;
            var startX = event.clientX + scroll.x;
            var startY = event.clientY + scroll.y;
            _startX = parseInt(startX);
            _startY = parseInt(startY);
            if (document.addEventListener) {
                document.addEventListener("mousemove", moveHandler, true);
                document.addEventListener("mouseup", upHandler, true);
            } else if (document.attachEvent) {
                target.setCapture();
                target.attachEvent("onlosecapeture", upHandler);
                target.attachEvent("onmouseup", upHandler);
                target.attachEvent("onmousemove", moveHandler);
            }
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }
        function moveHandler(e) {
            if (!e) e = window.event;
            var w, h;
            var startX = parseInt(e.clientX + scroll.x);
            var startY = parseInt(e.clientY + scroll.y);
            target = target || e.target || e.srcElement;
            if (target == document.body) {
                return;
            }
            if (resizeW) {
                deltaX = startX - _startX;
                w = $(target).width() + deltaX < minSize ? minSize : $(target).width() + deltaX;
                target.style.width = w + "px";
                _startX = startX;
            }
            if (resizeH) {
                deltaY = startY - _startY;
                h = $(target).height() + deltaY < minSize ? minSize : $(target).height() + deltaY;
                target.style.height = h + "px";
                _startY = startY;
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }
        function upHandler(e) {
            if (!e) {
                e = window.event;
            }
            resizeW = false;
            resizeH = false;
            target = e.target || e.srcElement;
            $(target).on("mouseout", outHandler);
            if (document.removeEventListener) {
                document.removeEventListener("mousemove", moveHandler, true);
                document.removeEventListener("mouseup", upHandler, true);
            } else if (document.detachEvent) {
                target.detachEvent("onlosecapeture", upHandler);
                target.detachEvent("onmouseup", upHandler);
                target.detachEvent("onmousemove", moveHandler);
                target.releaseCapture();
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }
        function getScrollOffsets(w) {
            w = w || window;
            if (w.pageXOffset != null) {
                return { x: w.pageXOffset, y: w.pageYOffset };
            }
            var d = w.document;
            if (document.compatMode == "CSS1Compat") {
                return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
            }
            return { x: d.body.scrollLeft, y: d.body.scrollTop };
        }
    }
}(jQuery));
jQuery("div").dragDivResize();

记录一下今天的劳动成果,可能会有很多不成熟的地方,欢迎大家来指正,谢谢!

以上就是本文的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • 利用JavaScript实现拖拽改变元素大小

    大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下

  • 可拖动可改变大小div的实现代码

    Dialog .dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;} .dialogtitle{height:26px; width:auto; background-image:url('http://files.jb51.net/file_images/200908/103444839.p.gif');} .dialogtitleinf

  • js通过八个点 拖动改变div大小的实现方法

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRigh

  • javascript实现鼠标拖动改变层大小的方法

    本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b

  • 鼠标拖动改变DIV等网页元素的大小的实现方法

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div change

  • jquery拖动改变div大小

    本文实例为大家分享了jquery拖动改变div大小的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 版"元素拖拽改变大小"原型 </title> <script type="text/jav

  • jquery实现拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. 复制代码 代码如下: (function ($) {     $.fn.dragDivResize = function () {         var deltaX, deltaY, _startX, _startY;         var resizeW, resizeH;         var size = 20;         var minSize = 10;         var scroll

  • JavaScript实现鼠标拖拽调整div大小

    本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码,供大家参考,具体内容如下 实现思路: 根据鼠标位置改变鼠标样式 当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改 当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的移动修改div的尺寸 鼠标松开时结束尺寸修改 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • jquery利用拖拽方式在图片上添加热链接

    本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍. 用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松

  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g

  • js实现鼠标拖拽缩放div实例代码

    封装为了jq插件,如下 drag.js ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最大宽度 minW:50// 可伸缩的最小宽度 };// 参数默认值 var opts = $.extend(def,options);// 扩展参数,使用默认值或传参 //设置最大/最小宽度 var max_width = opts.maxW, min_width = opts.minW; //

  • jquery实现拖拽table表头改变列宽

    本文实例为大家分享了jquery实现拖拽table表头改变列宽的具体代码,供大家参考,具体内容如下 效果: 直接上代码,有注释: <!DOCTYPE html> <html> <head>     <style>         table, td, th {             border: 1px solid #ddd;             text-align: left;         }         table {        

  • vue中的可拖拽宽度div的实现示例

    主要思路 在需要拖拽宽度的区域设置一个div,高度设为 100%,宽度尽量窄一些(也不要太窄,3-6px左右) 在此div上绑定当“鼠标按下”时,触发document绑定“鼠标移动”方法和"鼠标抬起"方法 通过鼠标移动方法不断获取当前鼠标位置,设置需要变化大小div的宽高. 鼠标抬起时取消鼠标移动方法和鼠标抬起方法的绑定. <template>   <div class="container" id="content_box"&

  • jquery实现拖拽添加元素功能

    本文实例为大家分享了jquery实现拖拽添加元素的具体代码,供大家参考,具体内容如下 需求 1.页面上有两个不同的容器,拖拽a容器的元素添加到b容器中: 2.a保持原位不dogn动,b增加新的元素,要实现的效果如下: 3.点击b容器中的元素移除元素 首先准备两个容器 页面效果如下 <div class="bigBox"> <div id="aBox"> <p class="drag" draggable="

随机推荐