jQuery 拖拽窗体

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 class="btn btn-primary" type="button"onclick="fff()">点击</button><div style="position: absolute;width:300px;width:220px;" id="Ha"><div id="Ha2"style="cursor: move;" >//cursor：定义了鼠标指针放在一个元素边界范围内时所用的光标形状//move：此光标指示某对象可被移动。//pointer：光标呈现为指示链接的指针（一只手）<i class="titleStyle">魔鬼</i><i style="cursor: pointer;" id="XiaLa" ></i><i style="cursor: pointer;" id="close_T" onclick="closeDialog_T()" ></i></div><div id="NeiRong">      </div> </div>

这是css里面的属性值，方便大家参考：
在这里插入图片描述
接下来就是要写方法，然后触发拖拽事件：

 <script>TuoZ();//调用方法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;}});