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 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js漂浮广告实现代码
Aug 15 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php验证码生成代码
2015/11/11 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
PHP webshell检查工具 python实现代码
2009/09/15 Python
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python解决八皇后问题示例
2018/04/22 Python
Python内置加密模块用法解析
2019/11/25 Python
python接入支付宝的实例操作
2020/07/20 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
百度软件工程师职位
2013/02/14 面试题
菜篮子工程实施方案
2014/03/08 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
mysql全面解析json/数组
2022/07/07 MySQL