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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
使用Vue写一个datepicker的示例
Jan 27 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php分页示例代码
2007/03/19 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
个人社会实践自我鉴定
2014/03/24 职场文书
竞选村长演讲稿
2014/04/28 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
岁月神偷观后感
2015/06/11 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
Python几种酷炫的进度条的方式
2022/04/11 Python