本文实例讲述了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程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#cainiaojc.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。