<!DOCTYPE html>

 <html>

 <head>

 <meta name="description" content="jQuery拖拽div" />

   <meta charset="utf-8">

   <title>JS Bin</title>

   <style>

     #div{ width:200px; height:200px; background:#ccc; position:absolute;}

 #div h1{ height:30px; line-height:30px; font-size:12px; text-align:center;background: #f1f1f1;border-bottom: 1px solid #ccc;}

   </style>

   <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.js"></script>

 </head>

 <body>

   <div id="div"><h1>标题</h1></div>

 <script>

   $.fn.setDrag = function(options){

     var defaults = {

     },

         that    = $(this),

         opts    = $.extend({}, defaults, options),

         doc     = $(document),

         width   = $(window).width(),

         height  = $(window).height(),

         startX  = 0,

         startY  = 0,

         lastX   = 0,

         lastY   = 0,

         box     = that.parent(), // handler.parentNode

         handler = that[0],

         drag    = {

             down: function(e){

                 that.css('cursor', 'move');

                 startX            = e.clientX - parseInt(box.css('left'));

                 startY            = e.clientY - parseInt(box.css('top'));

                 this.setCapture && this.setCapture(); // IE to prevent fast drag losing of object

                 doc.on('mousemove', drag.move);

                 doc.on('mouseup', drag.up);

                 return false; // chrome to prevent rolling screen, and the loss of the mouse move style

             },

             move: function(e){

                 lastX             = e.clientX - startX;

                 lastY             = e.clientY - startY;

                 lastX             = Math.max(0, Math.min(width - box.outerWidth(), lastX));

                 lastY             = Math.max(0, Math.min(height - box.outerHeight() - 1, lastY));

                 box.css({'top': lastY + 'px', 'left': lastX + 'px'});

                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // cancel the selected text

                 e.stopPropagation();

             },

             up: function(){

                 // that.css('cursor', 'auto');

                 doc.off('mousemove', drag.move);

                 doc.off('mouseup', drag.up);

                 handler.releaseCapture && handler.releaseCapture(); // IE to prevent fast drag losing of object

             }

         };

     that.on('mousedown', drag.down);

 }

 $('#div h1').setDrag();

 </script>  

 </body>

 </html>

div拖拽效果 JQuery的更多相关文章

  1. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  2. 跟随鼠标指针跑的div拖拽效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  4. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  6. 使用mousedown、mousemove、mouseup实现拖拽效果

    如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  9. jquery实现拖拽以及jquery监听事件的写法

    很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...

随机推荐

  1. React躬行记（14）——测试框架

    测试不仅可以发现和预防问题,还能降低风险.减少企业损失.在React中,涌现了多种测试框架,本节会对其中的Jest和Enzyme做详细的讲解. 一.Jest Jest是由Facebook开源的一个测试 ...

  2. String s = "a";与String s = new String("a")的区别

    String s1 = "a" 时,首先会在字符串常量池中查找有无 “a” 这个对象. 若没找到,就创建一个 "a" 对象, 然后,以 s1 为它的引用.若在字 ...

  3. 使用Feign访问接口

     添加主要依赖 使用Feign访问接口的配置,如果服务不在Eureka上,可以不加Eureka的依赖,用在FeignClient上指定url的方式访问 dependencies { compile(' ...

  4. 《Dotnet9》系列-开源C# WPF控件库3《HandyControl》强力推荐

    大家好,我是Dotnet9小编,一个从事dotnet开发8年+的程序员.我最近开始写dotnet分享文章,希望能让更多人看到dotnet的发展,了解更多dotnet技术,帮助dotnet程序员应用do ...

  5. 漫谈LiteOS之开发板-GPIO（基于GD32450i-EVAL）

    [摘要] 本文主要从GPIO的定义.工作模式.特色.工作场合.以及GD32450i-EVAL开发板的引脚.对应的寄存器以及GPIO的流水灯示例对GPIO加以介绍,希望对你有所帮助. 1定义 GPIO( ...

  6. 挑战10个最难的Java面试题（附答案）【上】

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),验证通过后,输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动&quo ...

  7. Android Application 详细介绍

    一.先看看文档里怎么说 Base class for those who need to maintain global application state. You can provide your ...

  8. P2910 [USACO08OPEN]寻宝之路Clear And Present Danger |Floyd

    题目描述 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛． 一张藏宝图上说,如果他的路程上经过的小岛依次出现了Ai,A2 ...

  9. MongoDB第三天（正则，管道，聚合，字符串，算术，日期，java连接MongoDB）

    部分正则表达式: i:忽略大小写 m:多行查找 x:设置 x 选项后,正则表达式中的非转义的空白字符将被忽略.   s:允许点字符(即.)匹配包括换行符在内的所有字符. w:匹配包括下划线的任何单词字 ...

  10. webpack(四) --css样式及图片打包

    一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是j ...