<!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. JavaScript笔记十

    1.正则表达式 - 语法: - 量词 {n} 正好n次 {m,n} m-n次 {m,} 至少m次 + 至少1次 {1,} ? 0次或1次 {0,1} * 0次或多次 {0,} - 转义字符 \ 在正则 ...

  2. python numpy学习

    以下代码来源于本博文作者观看大神视频并纯手敲. 目录 numpy的属性 创建array numpy的运算1 随机数生成以及矩阵的运算2 numpy的索引 array合并 array分割 numpy的浅 ...

  3. 【数据结构】之队列（Java语言描述）

    在[这篇文章]中,我简单介绍了队列的基本数据结构及操作方式,并用C语言代码描述了队列的基本功能实现. JDK中默认为我们提供了队列的API—— Queue . Queue是一个接口,其中提供了处理队列 ...

  4. ansible roles 介绍和使用

    目录 roles roles 介绍 创建role的步骤 role内个目录中可用的文件 案例 roles roles 介绍 ansible 自1.2版本引入的新特性,用于层次性.结构化地组织playbo ...

  5. Chrome插件安装的3种方法，解决拖放不能安装的情况，并提供插件下载

    本文摘录于Chrome插件网站 方法一:拖放安装 下载插件的crx文件后,打开Chrome的扩展页面(chrome://extensions/或按Chrome菜单图标>更多工具>扩展程序) ...

  6. 怎么把宿主机上的镜像推送到hub上

    怎么把宿主机上的镜像推送到hub上: 1.查看系统中存在的镜像: [root@izuf63bjp8ts8nkl13pxh1z devicemapper]# docker imagesREPOSITOR ...

  7. Spring Cloud第三篇 | 搭建高可用Eureka注册中心

    ​ ​本文是Spring Cloud专栏的第三篇文章,了解前两篇文章内容有助于更好的理解后面文章: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...

  8. Scrapy+eChart自动爬取生成网络安全词云

    因为工作的原因,近期笔者开始持续关注一些安全咨询网站,一来是多了解业界安全咨询提升自身安全知识,二来也是需要从各类安全网站上收集漏洞情报. 作为安全情报领域的新手,面对大量的安全咨询,多少还是会感觉无 ...

  9. 是时候考虑让你的Spark跑在K8S上了

    [摘要] Spark社区在2.3版本开始,已经可以很好的支持跑着Kubernetes上了.这样对于统一资源池,提高整体资源利用率,降低运维成本(特别是技术栈归一)有着非常大的帮助.这些趋势是一个大数据 ...

  10. 开发中遇到的一些bug及解决方案

    一.在使用UIStackView时报“UIStackView before iOS 9.0”.