<!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. db.properties（oracle）和（mysql）

    oracle jdbc.driver=oracle.jdbc.driver.OracleDriverjdbc.url=jdbc:oracle:thin:@localhost:1521:XEjdbc.u ...

  2. 【02】对象的Getter and Setter

    java和C#非常相似,它们大部分的语法是一样的,但尽管如此,也有一些地方是不同的. 为了更好地学习java或C#,有必要分清它们两者到底在哪里不同. 我们这次要来探讨对象的Getter and Se ...

  3. 深入理解.NET Core的基元（三） - 深入理解runtimeconfig.json

    原文:Deep-dive into .NET Core primitives, part 3: runtimeconfig.json in depth 作者:Nate McMaster 译文:深入理解 ...

  4. day20191009jdbc学习笔记

    周三Wednesday JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Ja ...

  5. 英语口语考试资料Family

    I Love my family   12 years  ago, I was born in a happy family, there was a gentle father, a beautif ...

  6. npm切换成淘宝镜像源

    0-前言 我们都知道node下载第三方依赖包是从国外服务器下载,不是速度奇慢就是下载异常,切换成国内的淘宝镜像源很有必要: 1-切换方法 $ npm config set registry https ...

  7. 第四章 开始Unity Shader学习之旅（2）

    目录 1. 强大的援手:Unity提供的内置文件和变量 1.1 内置的包含文件 1.2 内置的变量 2. Unity提供的Cg/HLSL语义 2.1 什么是语义 2.2 Unity支持的语义 2.3 ...

  8. VMware下载及安装使用方法

    一.VMware的介绍: 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统.DesktopVirtualBox,虚拟系统通过生成 ...

  9. 即将到来的“分布式云”（DPaaS）：分布式计算+ DB +存储即服务

    我在区块链会议上就即将到来的公共"分布式云"系统进行了讨论,该系统将主流的公共云平台(如AWS,Azure,Google Cloud,Heroku等)与区块链和P2P网络相结合,比 ...

  10. 【Java库】如何使用优秀的加密库Jasypt来保护你的敏感信息？

    1 简介 今天我们介绍一个Java库-Jasypt,全称为Java Simplified Encryption,用于加密解密.它能够让开发者用花费最小的工作而把加密集成到项目中,并且不需要对加密/解密 ...