jquery实现仿JqueryUi可拖动的DIV实例


Posted in Javascript onJuly 31, 2015

本文实例讲述了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实现仿JqueryUi可拖动的DIV实例

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
10个新的最有前途的JavaScript框架
Mar 12 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 #Javascript
JavaScript实现图片轮播的方法
Jul 31 #Javascript
基于bootstrap3和jquery的分页插件
Jul 31 #Javascript
jquery-tips悬浮提示插件分享
Jul 31 #Javascript
javascript实现检验的各种规则
Jul 31 #Javascript
纯JS实现本地图片预览的方法
Jul 31 #Javascript
javascript动画算法实例分析
Jul 31 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
整理Python中的赋值运算符
2015/05/13 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python实现三维拟合的方法
2018/12/29 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
Java程序员面试题
2013/07/15 面试题
英文求职信范文
2014/05/23 职场文书