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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 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执行速率优化技巧小结
2008/03/15 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
JavaScript的Cookies
2008/01/16 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python获取文件扩展名的方法
2015/07/06 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python列表如何更新值
2020/05/27 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
应届生自荐信
2014/06/30 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
2019年思想汇报
2019/06/20 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android