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;}});

實現的效果圖如下，圖中的藍色導航部分當鼠標選中并進行拖拽時，改變背景顏色，背景顏色透明顯示，點擊：

總結

以上是生活随笔為你收集整理的jQuery 拖拽窗体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。