jquery实现简单拖拽效果


Posted in jQuery onJuly 20, 2020

本文实例为大家分享了jquery实现简单拖拽的具体代码,供大家参考,具体内容如下

基本思路:

1.首先需要鼠标按下拖动区域,也就是需要调用 mousedown 方法

2.鼠标移动,需要拖动的元素跟着鼠标移动,调用 mousemove 方法

3.鼠标弹起拖动消失,调用 mouseup 方法 

下面看一下代码:

页面结构:

jquery实现简单拖拽效果

样式:

.drag {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  position: absolute;
}

效果图:

jquery实现简单拖拽效果

逻辑代码:

// 拖拽函数
function function_drag(ele) {
 $(ele).mousedown(function(e){
 // 获取鼠标离元素(0,0)位置的距离
 var positionDiv = $(this).offset(); //offset 元素的偏移坐标 有两个属性:top left(对显示的元素有用)
 var distenceX = e.pageX - positionDiv.left; //page 显示鼠标指针的位置  (此时相当于,鼠标按下的初始值)
 var distenceY = e.pageY - positionDiv.top; //
 
 // 鼠标移动
 $(document).mousemove(function(e){
  // 获取鼠标的位移(鼠标此时的page值 - 鼠标按下时的初始值 = 元素的移动值)
  var x = e.pageX - distenceX;
  var y = e.pageY - distenceY;
  if(x<0){
  x=0;
  }else if(x>$(document).width()-$(ele).outerWidth(true)){
  x = $(document).width()-$(ele).outerWidth(true);
  }
  if(y<0){
   y=0;
  }else if(y>$(document).height()-$(ele).outerHeight(true)){
   y = $(document).height()-$(ele).outerHeight(true);
  }
  $(ele).css({
  'left':x+'px',
  'top':y+'px'
  })
 })
 
 // 鼠标抬起
 $(document).mouseup(function(e){
  $(document).off('mousemove');
 })
 })
} 
function_drag('.drag');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery列表检索功能实现代码
Jul 17 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
You might like
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
python 连接sqlite及简单操作
2017/06/30 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python简单商城购物车实例代码
2018/03/15 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python语言基本语句用法总结
2019/06/11 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
深入了解Python enumerate和zip
2020/07/16 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
医院实习介绍信
2014/01/12 职场文书
中学生励志演讲稿
2014/04/26 职场文书
公务员检讨书
2014/11/01 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis