jquery实现拖动效果


Posted in Javascript onAugust 10, 2016

因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了 

如何实现拖动效果?

 jquery实现拖动效果

jquery实现拖动效果

jquery实现拖动效果

首先分析下拖动效果原理:
1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方)
2.开始移动鼠标(触发onmousemove事件)
3.移动时更显对象的top和left值
4.鼠标放开停止拖动(触发onmouseup事件)
注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative)。 

也就是说拖动事件=onmousedown事件+onmousemove事件 

整个过程就是处理这三个事件来模拟drag事件
现在看看我实现的源代码: 

html代码: 

<div class="drag">
 <p class="title">标题(点击标题拖动)</p>
</div>

<div class="drag1">
 <p class="title">标题</p>
 点击我移动
</div>
 

jquery插件代码:

(function($){
 $.fn.drag=function(options){

 //默认配置
 var defaults = {
 handler:false,
 opacity:0.5
 };

 // 覆盖默认配置
 var opts = $.extend(defaults, options);

 this.each(function(){

 //初始标记变量
 var isMove=false,
 //handler如果没有设置任何值,则默认为移动对象本身,否则为所设置的handler值
 handler=opts.handler?$(this).find(opts.handler):$(this),
 _this=$(this), //移动的对象
 dx,dy;

 $(document)
 //移动鼠标,改变对象位置
 .mousemove(function(event){
 // console.log(isMove);
 if(isMove){

 //获得鼠标移动后位置
 var eX=event.pageX,eY=event.pageY;

 //更新对象坐标
 _this.css({'left':eX-dx,'top':eY-dy});

  }
 })

 //当放开鼠标,停止拖动
 .mouseup(function(){
 isMove=false;
 _this.fadeTo('fast', 1);
 //console.log(isMove);
  });

 handler
 //当按下鼠标,设置标记变量isMouseDown为true
 .mousedown(function(event){

 //判断最后触发事件的对象是否是handler
 if($(event.target).is(handler)){

 isMove=true;
 $(this).css('cursor','move');

 //console.log(isMove);
 _this.fadeTo('fast', opts.opacity);

 //鼠标相对于移动对象的坐标
 dx=event.pageX-parseInt(_this.css("left"));
 dy=event.pageY-parseInt(_this.css("top"));

  }
   });
  });
 };
 })(jQuery);
 

调用方法:

$(function(){

 //拖动标题
 $(".drag").drag({
handler:$('.title'),//操作拖动的对象,此对象必须是移动对象的子元素
opacity:0.7 //设置拖动时透明度
});

 //拖动主体对象
 $(".drag1").drag({
 opacity:0.7
 });

 });

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

Javascript 相关文章推荐
在视频前插入广告
Nov 20 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
JS弹出新窗口被拦截的解决方法
Aug 09 #Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 #Javascript
JS获取一个未知DIV高度的方法
Aug 09 #Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 #Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 #Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 #Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 #Javascript
You might like
php 获取select下拉列表框的值
2010/05/08 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
单元选择合并变色示例代码
2014/05/26 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Django框架反向解析操作详解
2019/11/28 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
《观潮》教学反思
2016/02/17 职场文书
人生感悟经典句子
2019/08/20 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL