<!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. springboot整合netty的多种方式

    netty作为一个高性能的io框架,是非好用的一个技术框架, Netty 是一个基于NIO的客户.服务器端编程框架,使用Netty 可以确保你快速和简单的开发出一个网络应用,例如实现了某种协议的客户. ...

  2. ehcache同步原理

    最近研究ehcache同步时发现一个问题: 现有A.B两个服务器,由A服务器向B服务器同步信息,采用RMI方式手动方式进行同步 配置信息如下: <?xml version="1.0&q ...

  3. mr的partition分区

    1.Partitioner 组件通过让 Map 对 Key 进行分区,从而将不同分区的 Key 交由不同的 Reduce 处理.Partition属于map端 2.分区的总数与任务的reduce任务数 ...

  4. day20190904一号店网页HTML+CSS

    1.知识要理一理.梳理.当天讲了什么内容?当天我学习到了什么内容?看懂.所有的学习型从模仿开始.1.看懂代码,看懂思路,学思路,多问自己问题,为什么要这么写?下一步为什么要这么写?因 果.2.多练多敲 ...

  5. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（4）- OTP及其烧写方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的OTP. 在i.MXRTxxx启动系列第二篇文章 Boot配置(ISP Pin, OTP) 里痞子 ...

  6. SimpleXML使用详解

    SimpleXML使用详解 介绍 SimpleXML提供了一种简单,直观的方法来处理XML.它只有一个单一类型的类,三个函数和六个方法. 使用SimpleXML SimpleXMLElement 类是 ...

  7. 配置防盗链、访问控制Directory和FilesMatch

    5月31日任务 课程内容: 11.25 配置防盗链11.26 访问控制Directory11.27 访问控制FilesMatch扩展几种限制ip的方法 http://ask.apelearn.com/ ...

  8. lvm_lv_create

    lvm  lv create 开机自动挂载 neokylinV7.0 [root@localhost ~]# fdisk -l 磁盘 /dev/vda:322.1 GB, 322122547200 字 ...

  9. 转:Java实现敏感词过滤

    敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有必要的.前段时间我一个朋友(马上毕业,接触编程不久)要我帮他看一个文字过滤的东西,它说检索效率非常慢.我把它程序拿过来 ...

  10. js-Date()对象,get/setFullYear(),getDay()编程练习

    啥也不说!看代码 主要注意:getday()方法中原理!!! <!DOCTYPE html> <html lang="en"> <head> & ...