jQuery实现div随意拖动的实例代码(通用代码)


Posted in Javascript onJanuary 28, 2016

注意js放的位置,要放的靠近,若被其他覆盖,则无法移动。

比如:

<div id="move">可移动的DIV</div>

引入jquery.js, jquery-ui.js,

<script scr="http://code.jquery.com/jquery-1.10.2.js"></script>
<script scr="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

一句:

$("#move").draggable();

如希望,点住时鼠标变手形:

$("#move").mousedown(function(){
$(this).css("cursor","pointer");
}).mouseup(function(){
$(this).css("cursor","default");
});

下面给大家分享一段通用代码jquery实现拖动div的通用方法

<script type="text/javascript"><!-- 
$(document).ready(function() 
{ 
$(".show").mousedown(function(e)//e鼠标事件 
{ 
$(this).css("cursor","move");//改变鼠标指针的形状 
var offset = $(this).offset();//DIV在页面的位置 
var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 
$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 
{ 
$(".show").stop();//加上这个之后 
var _x = ev.pageX - x;//获得X轴方向移动的值 
var _y = ev.pageY - y;//获得Y轴方向移动的值 
$(".show").animate({left:_x+"px",top:_y+"px"},10); 
}); 
}); 
$(document).mouseup(function() 
{ 
$(".show").css("cursor","default"); 
$(this).unbind("mousemove"); 
}) 
}) 
// --></script>
Javascript 相关文章推荐
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 #Javascript
使用node+vue.js实现SPA应用
Jan 28 #Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 #Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
围观tangram js库
2010/12/28 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
浅说js变量
2011/05/25 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Django  ORM 练习题及答案
2019/07/19 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
自荐信的禁忌和要点
2013/10/15 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
教师自我鉴定范文
2013/11/10 职场文书
运动会广播稿500字
2014/01/28 职场文书
如何写自我鉴定
2014/03/19 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
卖车协议书范文
2016/03/23 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android