【JS】实现拖动div右侧改变,改变div宽度 /及拖动div的整理

先看看效果吧.   【拖动右侧改变div的宽度】

一开始也挺蒙的，不晓得思路，我就思考，先是获取到右侧的边缘->触发事件->拖动-->改变宽度;

然后都不晓得怎么实现.我发挥面向百度编程一波下来,找到一个类似博客（点击跳转）<--就是这个啦

好啦，说我改编过的代码；

相当简短；     因为我的td是动态生成的，所以直接绑定事件

/*     author: YangMingWei   time ：2018/6/13
        *    describe: 绑定td的拖动右侧自定义宽度
        **/
        td.bind ('mousedown', function (_event) {
            var isMouseDown = false;   //初始化状态
            var ele = $ (this);   //获取到td的内容
            var eleLeft = ele.offset ().left;  //获取td距离左侧的距离
            var rightPos = eleLeft + ele.width () + 2; //左侧距离+元素宽度+2(边框)
            //元素右侧端-6px < = 点击的距离   且  点击距离<= 元素右侧端
            if (rightPos - 6 <= _event.pageX && _event.pageX <= rightPos) {
                isMouseDown = true;  //如果在右侧边缘偏左6px内.允许移动
            }
            //document的移动时间
            document.onmousemove = function (_event) {
                //如果在范围内
                if (isMouseDown) {
                    //改变元素的样式
                    ele.css ('cursor', 'e-resize');
                    //获取移动的宽度
                    var width = _event.pageX - eleLeft - 2;
                    //获取td的field属性;
                    var selector = ele.attr ('field');
                    //查询所有的列元素,改变宽度    
                    $ ("td[field='" + selector + "']").find ('.datagrid-cell').css ('width', width);
                }
                //最后返回false;
                return false;
            };
            //鼠标松开清空所有事件
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            //mouseDown返回也要false;
            return false;
        });  

【拖动div】看下面效果，过程还是自行脑部

其实代码跟上面逻辑是一样的。

点击元素-->绑定移动事件 -->改变position-->松开

看看下面代码咯

 /**窗口移动*/
        var $move = $ ('<p class="move">' + _title + '</p>')
            .bind ('mousedown', function (_event) {
                var event = _event || window.event;
                disX = event.offsetX;
                disY = event.offsetY;
                document.onmousemove = function (_event) { //整个高级查询框移动
                    var event = _event || window.event;
                    var iL = event.clientX - disX;  //获取left
                    var iT = event.clientY - disY;  //获取top
                    var maxL = document.documentElement.clientWidth - $ ('.H-wrapper').width (); //最大left值
                    var maxT = document.documentElement.clientHeight - $ ('.H-wrapper').height ();//最大top值
                    iL <= 0 && (iL = 0);   //限宽
                    iT <= 0 && (iT = 0);   //限高
                    iL >= maxL && (iL = maxL);  //如果越界设置最大值
                    iT >= maxT && (iT = maxT);
                    //改变元素的位置   
                    $ ('.H-wrapper>.header>.move').parents ('.H-wrapper').addClass ('noTransform').css ({
                        'top' : iT,
                        'left': iL
                    });
                    return false;
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            });

根据逻辑举一反三吧

写完咯。拜拜 …………