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 IE中的DOM ready应用技巧
Jul 23 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
Vue+Node实现的商城用户管理功能示例
Dec 23 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常用字符串的总结(待续)
2013/06/07 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
实例浅析js的this
2016/12/11 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
python中while和for的区别总结
2019/06/28 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python不同版本的_new_不同点总结
2020/12/09 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
一些PHP的面试题
2015/05/06 面试题
什么是URL
2015/12/13 面试题
机电一体化专业推荐信
2013/12/03 职场文书
上学迟到的检讨书
2014/01/11 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
无房证明范本
2014/09/17 职场文书
升职自荐信范文
2015/03/27 职场文书
师范生见习总结范文
2015/06/23 职场文书