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+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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 exif扩展方法开启详解
2014/07/28 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python实现多属性排序的方法
2018/12/05 Python
Python 占位符的使用方法详解
2019/07/10 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
小学体育教学反思
2014/01/31 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
法定代表人免职证明
2015/06/24 职场文书
学校学期工作总结
2015/08/13 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers