本文實例講述了jquery實作仿JqueryUi可拖曳的DIV。分享給大家供大家參考。具體如下：
這是用Jquery寫的程式碼，仿JQUERYUI的Draggable或是Dialog,希望大家喜歡，寫的一個小東西。參考了下網上的其他人寫的類似代碼，但是不完全模仿
<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坐标和Y坐标
var x=event.clientX;
var y=event.clientY;
//得到可拖动框的高度和宽度
var widthX=$("#draggable").width();
var heightY=$("#draggable").height();
//alert("x:"+ x+"width:"+widthX);
//确定拖动的时候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");
});
}
//鼠标拖动DIV,鼠标按下去的事件
//alert('1');
$(document).ready(function(e) {
//鼠标按下去的时候执行下面的代码
$("#draggable").mousedown(function(){
Drag();
//鼠标点击的时候取消事件绑定
MouseUp();
});
});
</script>
</head>
<body>
<!--输入文字 -->
<div><input id="typewords" type="text" /> <input type="button" id="write" value="写心情" /></div>
<br />
<hr />
<!-- container,里面包含了心情的内容-->
<div id="container">
<!--可拖动的DIV -->
<div id="draggable">
测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
</div>
</div>
</body>
</html>運作效果如下：
希望本文所述對大家的jquery程式設計有所幫助。
