网站维护哪些,厦门网站优化公司,免费空间忘记密码解决方法,沈阳定制型网站建设jQuery 拖拽窗体事件
今天给大家分享一个简单拖拽事件#xff0c;可以通过拖拽事件实现数据的传递,已达到良好的交互#xff0c;可以实现更为可观的效果。 具体来说#xff0c;只有三部基本的操作#xff1a; 第一#xff1a;当鼠标按下时触发的事件#xff08;onmoused…jQuery 拖拽窗体事件
今天给大家分享一个简单拖拽事件可以通过拖拽事件实现数据的传递,已达到良好的交互可以实现更为可观的效果。 具体来说只有三部基本的操作 第一当鼠标按下时触发的事件onmousedown。 第二鼠标移动时事件onmousemove。 第三鼠标松开时停止移动事件onmouseup。
首先我们先设置样式。
// 样式style#XiaLa { background-image: url(../../Content/img/small.png);float: right;width: 18px;height: 18px;background-size: 100%;background-repeat: no-repeat;position: absolute;top: 3px;right: 18px;}#close_T {background-image: url(../../Content/img/close.PNG);width: 18px;height: 18px;background-size: 100%;background-repeat: no-repeat;position: absolute;top: 3px;right: 0px;}#Ha {width: 256px;position: absolute;top: 0%;left: 5%;background: #FFF;z-index: 2;border: 1px solid #3586D7;border-radius: 2px;display: none;}#Ha2 { width: 100%;height: 25px;line-height: 25px;text-align: center;background-color: #3586D7;position: relative; }.titleStyle{font-style: normal;color: #fff;font-size: 12px;font-weight: bold;font-family: 宋体;line-height: 22px !important;} /style然后下面是body里面的代码
//button classbtn btn-primary typebuttononclickfff()点击/buttondiv styleposition: absolute;width:300px;width:220px; idHadiv idHa2stylecursor: move; //cursor定义了鼠标指针放在一个元素边界范围内时所用的光标形状//move此光标指示某对象可被移动。//pointer光标呈现为指示链接的指针一只手i classtitleStyle魔鬼/ii stylecursor: pointer; idXiaLa /ii stylecursor: pointer; idclose_T onclickcloseDialog_T() /i/divdiv idNeiRong /div /div这是css里面的属性值方便大家参考 接下来就是要写方法然后触发拖拽事件 scriptTuoZ();//调用方法function TuoZ() {//可以设置初始值的位置//$(#Ha).css(top, 200px);//$(#Ha).css(left, 1563px;);var ifmove false;//开始判断是否移动var x1, y1;//鼠标离控件左上角的相对位置//mousedown当鼠标指针移动到元素上方并按下鼠标按键时发生 mousedown 事件。$(#Ha2).mousedown(function (e) {ifmove true;//pageX返回相对于文档左边缘的鼠标位置//pageY返回相对于文档上边缘的鼠标位置//parseInt解析一个字符串并返回一个整数。x1 e.pageX - parseInt($(#Ha).css(left));y1 e.pageY - parseInt($(#Ha).css(top));//fadeTo把被选元素逐渐改变至给定的不透明度$(#Ha2).fadeTo(20, 0.5);//点击开始拖动并透明显示// 参考//$(selector).fadeTo(speed,opacity,callback);//必需的 speed 参数规定效果的时长。它可以取以下值slow、fast 或毫秒。//fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度值介于 0 与 1 间。//可选的 callback 参数是该函数完成后所执行的函数名称。});//mousemove 鼠标离开事件$(document).mousemove(function (e) {if (ifmove) {var x e.pageX - x1;//移动时鼠标位置计算控件左上角的绝对位置var y e.pageY - y1;var width parseInt($(#content).css(width));var width1 parseInt($(#Ha).css(width));var height parseInt($(#content).css(height));var height1 parseInt($(#Ha).css(height));//判断值是否 小于0,小于0就让等于0if (x 0) {x 0;}if (y 0) {y 0;}//判断值是否 大于0,大于0就让等于0if (y height - height1) {y height - height1;}if (x width - width1) {x width - width1;}$(#Ha).css({ top: y, left: x });//得到控件的新位置}}).mouseup(function () {//mouseup当在元素上松开鼠标按钮时会发生 mouseup 事件。ifmove false;$(#Ha2).fadeTo(fast, 1);//松开鼠标后停止移动并恢复成不透明});}
所上代码所示也有注释分析一个简单的拖拽就这样完成了。
//这里是窗体向下与向上点击事件的判断
var TF true;$(#XiaLa).click(function () {if (TF) {$(#NeiRong).attr(style, display:block;width:214px;height:212px;border:3px solid #3586D;);TF false;} else {$(#NeiRong).attr(style, display:none);TF true;}});实现的效果图如下图中的蓝色导航部分当鼠标选中并进行拖拽时改变背景颜色背景颜色透明显示点击
