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 相关文章推荐
javascript中数组array及string的方法总结
Nov 28 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
vue上传图片组件编写代码
Jul 26 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
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中intval()等int转换时的意外异常情况
2013/06/21 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python 文件管理实例详解
2015/11/10 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
《姥姥的剪纸》教学反思
2014/02/25 职场文书
文明礼貌主题班会
2015/08/14 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电