先看看效果吧. 【拖动右侧改变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; });
根据逻辑举一反三吧
写完咯。拜拜 …………