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之卸载鼠标事件的代码
May 14 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
高中毕业生的个人自我评价
2014/02/21 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
设备管理实施方案
2014/05/31 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
共青团员自我评价范文
2014/09/14 职场文书
离婚案件被告代理词
2015/05/23 职场文书
高中开学感言
2015/08/01 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
索尼ICF-5900W收音机测评
2022/04/24 无线电