jquery實(shí)現(xiàn)仿JqueryUi可拖動的DIV實(shí)例

更新時(shí)間：2015年07月31日 15:29:02 作者：KMSFan

這篇文章主要介紹了jquery實(shí)現(xiàn)仿JqueryUi可拖動的DIV,實(shí)例分析了jquery模擬jqueryUI實(shí)現(xiàn)div拖動的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)仿JqueryUi可拖動的DIV。分享給大家供大家參考。具體如下：

這是用Jquery寫的代碼，仿JQUERYUI的Draggable或者是Dialog,希望大家喜歡，寫的一個小東西。參考了下網(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">
//拖動
function Drag()
{
  $("#draggable").mousemove(function(event){
  //得到X坐標(biāo)和Y坐標(biāo)
  var x=event.clientX;
  var y=event.clientY;
  //得到可拖動框的高度和寬度
  var widthX=$("#draggable").width();
  var heightY=$("#draggable").height();
  //alert("x:"+ x+"width:"+widthX);
  //確定拖動的時(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)拖動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" />&nbsp;&nbsp;<input type="button" id="write" value="寫心情" /></div>
<br />
<hr />
<!-- container,里面包含了心情的內(nèi)容-->
<div id="container">
 <!--可拖動的DIV -->
 <div id="draggable">
 測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)
 </div>
</div>
</body>
</html>

運(yùn)行效果如下：