jquery实现仿JqueryUi可拖动的DIV实例
更新时间：2015年07月31日 15:29:02 作者：KMSFan
这篇文章主要介绍了jquery实现仿JqueryUi可拖动的DIV,实例分析了jquery模拟jqueryUI实现div拖动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章
本文将结合实际,使用PHP读取Mysql数据表中的数据,并将获取的数据按照要求输出给前端JS,再通过配置调用Highcharts图表库生成饼状图。2015-05-05
本文给大家分享的是一款由jQuery实现的表格行上下移动以及置顶效果的代码，非常的简单实用，这里给出了核心代码，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要介绍了jquery通过load获取文件的内容并跳到锚点的方法,涉及load及animate等方法的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery中outerWidth()方法用法,实例分析了outerWidth()方法的功能、定义及获取第一个匹配元素外部宽度的使用技巧,需要的朋友可以参考下2015-01-01
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
这篇文章主要介绍了jQuery mobile的header和footer在点击屏幕的时候消失的解决办法，通过给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"完成此功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-07-07
JS·经典·炫彩菜单(动画效果) for jquery2010-01-01
今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，两者对比可以看出jquery的强大2014-09-09
jquery简单导航实现代码，需要的朋友可以参考下。2009-09-09
下面小编就为大家带来一篇jQuery向父辈遍历的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了Easy UI动态树点击文字实现展开关闭功能,需要的朋友可以参考下2017-09-09
最新评论