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 CSS修改学习第一章 查找位置
Feb 19 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
js分页代码分享
Apr 28 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
React路由鉴权的实现方法
Sep 05 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python中的Numpy入门教程
2014/04/26 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
计算机专业自荐信
2013/10/14 职场文书
毕业自荐书
2013/12/09 职场文书
双创工作实施方案
2014/03/26 职场文书
十八大演讲稿
2014/05/22 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
道歉情书大全
2015/05/12 职场文书
行政答辩状范文
2015/05/21 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
python文件与路径操作神器 pathlib
2022/04/01 Python