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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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实现框架(一)
2006/10/09 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
分享php邮件管理器源码
2016/01/06 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
js实现缓动动画
2020/11/25 Javascript
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
PHP两种查询函数array/row的区别
2013/06/03 面试题
大学生职业生涯规划书范文
2014/01/04 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
校园创业策划书
2014/01/14 职场文书
考博专家推荐信
2014/05/10 职场文书
银行求职信怎么写
2014/05/26 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
开平碉楼导游词
2015/02/06 职场文书
公司聚餐通知
2015/04/22 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
党员廉政准则心得体会
2016/01/20 职场文书