html宽度可拖拽,jquery实现div拖拽宽度示例代码

本例是个非常简单的div拖动，有需要的朋友可根据自己的需求，添加相应的代码。欢迎拍砖

div width resize

function bindResize(el)

{

//初始化参数

var els = document.getElementById('menu').style;

//鼠标的 X 和 Y 轴坐标

x = 0;

//邪恶的食指

$(el).mousedown(function (e)

{

//按下元素后，计算当前鼠标与对象计算后的坐标

x = e.clientX - el.offsetWidth - $("#menu").width();

//在支持 setCapture 做些东东

el.setCapture ? (

//捕捉焦点

el.setCapture(),

//设置事件

el.onmousemove = function (ev)

{

mouseMove(ev || event);

},

el.onmouseup = mouseUp

) : (

//绑定事件

$(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)

);

//防止默认事件发生

e.preventDefault();

});

//移动事件

function mouseMove(e)

{

//宇宙超级无敌运算中...

els.width = e.clientX - x + 'px';

}

//停止事件

function mouseUp()

{

//在支持 releaseCapture 做些东东

el.releaseCapture ? (

//释放焦点

el.releaseCapture(),

//移除事件

el.onmousemove = el.onmouseup = null

) : (

//卸载事件

$(document).unbind("mousemove",mouseMove).unbind("mouseup",mouseUp)

);

}

}

var divResize=function(){

var totalHeight=$("html").height();

console.log(totalHeight);

var topHeight=$("#top").height()

$("#menu").height(totalHeight-topHeight);

$("#rightbar").height(totalHeight-topHeight);

}

$(function() {

divResize();

$(window).resize(divResize);

bindResize(document.getElementById('rightbar'));

});

.content {

width: 200px;

background: #f1f1f1;

text-align: center;

border-color: #CCCCCC;

border-style: solid;

border-width: 0 1px;

}

style="width: 2px; background: #cccccc; cursor: e-resize;">

--%>

待拖拽的div

style="width: 2px; background: #cccccc; cursor: e-resize; float: left;">

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！