jquery實(shí)現(xiàn)仿JqueryUi可拖動(dòng)的DIV實(shí)例
本文實(shí)例講述了jquery實(shí)現(xiàn)仿JqueryUi可拖動(dòng)的DIV。分享給大家供大家參考。具體如下:
這是用Jquery寫的代碼,仿JQUERYUI的Draggable或者是Dialog,希望大家喜歡,寫的一個(gè)小東西。參考了下網(wǎng)上的其他人寫的類似代碼,但是不完全模仿
<html> <head> <meta charset="utf-8" /> <style type="text/css"> #typewords { } #write { } #container { border:2px solid red; width:800px; height:500px; } #draggable { position:absolute; z-index:5; width:200px; height:200px; top:20px; left:50px; border: 3px solid blue; } </style> <script src="jquery.js"></script> <script type="text/javascript"> //拖動(dòng) function Drag() { $("#draggable").mousemove(function(event){ //得到X坐標(biāo)和Y坐標(biāo) var x=event.clientX; var y=event.clientY; //得到可拖動(dòng)框的高度和寬度 var widthX=$("#draggable").width(); var heightY=$("#draggable").height(); //alert("x:"+ x+"width:"+widthX); //確定拖動(dòng)的時(shí)候X,Y的值 $("#draggable").css("top",y-50+"px"); $("#draggable").css("left",x-50+"px"); }); } function MouseUp() { $("#draggable").mouseup(function(){ if(window.captureEvents) { window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); var d = document; d.onmousemove = null; d.onmouseup = null; } //解除mousemove的綁定 $("#draggable").unbind("mousemove"); }); } //鼠標(biāo)拖動(dòng)DIV,鼠標(biāo)按下去的事件 //alert('1'); $(document).ready(function(e) { //鼠標(biāo)按下去的時(shí)候執(zhí)行下面的代碼 $("#draggable").mousedown(function(){ Drag(); //鼠標(biāo)點(diǎn)擊的時(shí)候取消事件綁定 MouseUp(); }); }); </script> </head> <body> <!--輸入文字 --> <div><input id="typewords" type="text" /> <input type="button" id="write" value="寫心情" /></div> <br /> <hr /> <!-- container,里面包含了心情的內(nèi)容--> <div id="container"> <!--可拖動(dòng)的DIV --> <div id="draggable"> 測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù)測(cè)試數(shù)據(jù) </div> </div> </body> </html>
運(yùn)行效果如下:
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jQuery實(shí)現(xiàn)Email郵箱地址自動(dòng)補(bǔ)全功能代碼
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- 使用jquery實(shí)現(xiàn)仿百度自動(dòng)補(bǔ)全特效
- 基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能
- jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能示例分享
- PHP+jQuery實(shí)現(xiàn)自動(dòng)補(bǔ)全功能源碼
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- jqueryUI里拖拽排序示例分析
- jQueryUI寫一個(gè)調(diào)整分類的拖放效果實(shí)現(xiàn)代碼
- jQueryUI如何自定義組件實(shí)現(xiàn)代碼
- jQueryUI的Dialog的簡(jiǎn)單封裝
- 詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法
相關(guān)文章
jQuery對(duì)html元素的取值與賦值實(shí)例詳解
這篇文章主要介紹了jQuery對(duì)html元素的取值與賦值,較為詳細(xì)的分析了jQuery針對(duì)常見(jiàn)html元素的獲取與賦值技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】
這篇文章主要介紹了jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法,結(jié)合實(shí)例形式分析了jQuery.eraser.js插件的功能、使用方法與相關(guān)注意事項(xiàng),并附帶eraser.js插件源碼供讀者下載使用,需要的朋友可以參考下2017-04-04用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能
這篇文章主要介紹了用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-11-11jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例,實(shí)現(xiàn)前端通過(guò)jQuery Ajax傳輸json到后端,后端接收json,對(duì)json進(jìn)行處理,后端返回一個(gè)json給前端,有興趣的可以了解一下。2017-03-03基于JQuery的簡(jiǎn)單實(shí)現(xiàn)折疊菜單代碼
利用JQUERY簡(jiǎn)單的實(shí)現(xiàn)功能菜單的折疊效果。本人初學(xué),寫后臺(tái)稍多一點(diǎn),很少寫前臺(tái)的效果。還請(qǐng)大蝦們多多指教。2010-09-09jQuery實(shí)現(xiàn)返回頂部按鈕和scroll滾動(dòng)功能[帶動(dòng)畫效果]
這篇文章主要介紹了jQuery實(shí)現(xiàn)返回頂部按鈕和scroll滾動(dòng)功能[帶動(dòng)畫效果],需要的朋友可以參考下2017-07-07jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實(shí)例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03