jquery实现仿JqueryUi可拖动的DIV实例
更新时间：2026-02-18 20:25:44作者：fang
本文实例讲述了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程序设计有所帮助。
