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