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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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高级编程实例:编写守护进程
2014/09/02 PHP
thinkphp缓存技术详解
2014/12/09 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
任意位置显示html菜单
2007/02/01 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
AngularJs每天学习之总体介绍
2017/08/07 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
python属于解释型语言么
2020/06/15 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
病媒生物防治方案
2014/05/13 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
如何使用pdb进行Python调试
2021/06/30 Python
python开发飞机大战游戏
2021/07/15 Python
python​格式化字符串
2022/04/20 Python
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL