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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
js正则表达式的使用详解
Jul 09 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 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
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
js代码实现微博导航栏
2015/07/30 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
原生JS无缝滑动轮播图
2019/10/22 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
通过Pandas读取大文件的实例
2018/06/07 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
法制宣传月活动方案
2014/05/11 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
职工食堂管理制度
2015/08/06 职场文书
合作意向书怎么写
2019/06/24 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL
CentOS MySql8 远程连接实战
2022/04/19 MySQL