DDR爱好者之家

jquery实现拖动效果
站长资源 2024/11/28 佚名
53 1538
DDR爱好者之家 Design By 杰米

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

如何实现拖动效果？

 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"left"));
 dy=event.pageY-parseInt(_this.css("top"));

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

调用方法：

$(function(){

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

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

 });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米