收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2992|回复: 0

[jquery] jquery拖拽效果

[复制链接]
发表于 2017-10-20 15:00:41 | 显示全部楼层 |阅读模式
本帖最后由 jianwang19 于 2017-10-20 15:13 编辑

为什么写这个呢?
因为今天突然接到这个需求,有点懵,很久没有做过这个了。。。
本来打算找自己保存的资料,后来想了想,算了,重新写一个吧
就有了这个

 提示:您可以先修改部分代码再运行


附上格式化之后的代码
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <script src="http://code.jquery.com/jquery-2.2.4.js"></script>
  5.                 <script>
  6.                 $(document).ready(function(){
  7.                         dragTc();
  8.                         function dragTc(){
  9.                                 var _move = false;
  10.                                 var _x, _y, _left, _top, maxX, maxY;
  11.                                 $(document).on('mousedown',".drag-head",function(e){  
  12.                                         e = e || event;
  13.                                         if(e.target.tagName != "EM"){
  14.                                                 e.preventDefault();
  15.                                                 _move = true;
  16.                                                 var $box = $(this).parent();
  17.                                                 _left = $box.offset().left - $(window).scrollLeft();//元素初始位置
  18.                                                 _top = $box.offset().top - $(window).scrollTop();
  19.                                                 _x=e.pageX;//光标初始位置
  20.                                                 _y=e.pageY;
  21.                                                 maxX = $(window).width() - $box.width();
  22.                                                 maxY = $(window).height() - $box.height();
  23.                                                 $box.addClass('mousethis').find('.drag-cont').fadeTo(20, 0.5);//点击后开始拖动并透明显示 ,如果不要,可以不写
  24.                                         }else{
  25.                                                 $(this).parent().hide();
  26.                                         }
  27.                                 });  
  28.                                 $(document).mousemove(function(e){  
  29.                                         e = e || event;
  30.                                         if(_move){  
  31.                                                 e.preventDefault();
  32.                                                 var x = e.pageX - _x + _left;//光标位移量
  33.                                                 var y = e.pageY - _y + _top;
  34.                                                 x = x < 0 ? 0 : (x > maxX ? maxX : x);
  35.                                                 y = y < 0 ? 0 : (y > maxY ? maxY : y);
  36.                                                 $(".mousethis").css({top:y,left:x, right: 'auto', bottom: 'auto','margin': 'auto'});//控件新位置  
  37.                                         }  
  38.                                 }).mouseup(function(){  
  39.                                         if(_move){
  40.                                                 _move = false;  
  41.                                                 $(".mousethis").find('.drag-cont').fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明  
  42.                                                 $(".mousethis").removeClass('mousethis');
  43.                                         }
  44.                                 });
  45.                         }
  46.                 });
  47.                 </script>
  48.         </head>
  49.         <body>
  50.         <div class="drag" style="position: fixed;width: 400px;height: 250px;background: #ccc;">
  51.                 <h3 class="drag-head" style="margin: 0;padding: 15px;text-align: center;background: #f1f2f6;cursor: move;">拖拽头<em class="drag-close" style="float: right;cursor: default;">x</em>
  52.                 </h3>
  53.                 <div class="drag-cont" style="padding: 15px;">
  54.                         这里面可拖拽</br>
  55.                         这里面可拖拽</br>
  56.                         这里面可拖拽</br>
  57.                         这里面可拖拽</br>
  58.                         这里面可拖拽</br>
  59.                 </div>
  60.         </div>
  61.         </body>
  62. </html>
复制代码
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-22 10:39 , Processed in 0.093515 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表