<!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. 2019牛客暑期多校训练营（第二场）J.Subarray

    题意:给你一个n 表示有n段连续的1序列 现在问你 在总长度为0~1e9-1的范围内有多少个大于0的子段 思路:假设我们统计了当前的前缀和 我们显然可以用树状数组维护一下前缀和 这样我们可以nlogn ...

  2. Java基础常见笔试题总结

    1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件 2.“sta ...

  3. 个人收藏--未整理—C# 上传下载文件

    Winform下载文件 /// <summary> /// 下载文件 /// </summary> /// <param name="URL"> ...

  4. Xtrabackup 全备和还原以及增量备份和还原

    目录 MySQL环境介绍 全备和还原 准备备份目录 创建测试数据 全量备份 模拟删除数据 还原数据操作 第一步 备份备份文件 第二步 关闭数据库 第三步 移除数据库的data目录 第四步 恢复前准备 ...

  5. js抽奖概率随机取出数据(简单示例)

    在平常活动开发当中,经常会碰到抽奖等类似的js功能,那么下面我们随机取数组中的一条来展示出来. ( 一 ) 无概率问题 var gift_ = ['apple pro一台','iphoneX一台',' ...

  6. 微信小程序实现，可滑动、可点击

    tab.wxml: 全部 中奖 未中奖 全部 中奖 未中奖 tab.wxss: .swiper-tab { width: 100%; border-bottom: 2rpx solid #ccc; t ...

  7. js中动画原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  8. 区块链学习笔记：DAY01 区块链的技术原理

    其实很早之前就听过区块链,也看过有关区块链的介绍,那个时候的理解主要还是一句话:分布式记账 然后开始关注比特币,听了有几年了,对于其来历.用途其实一直都是一知半解. 这次的课算是第一次以一个学员的身份 ...

  9. OCR文字识别在计算机视觉的重要性、基本技术和最新进展

    [摘要] 主要是文字检测和文字识别作为计算机视觉一部分的重要性,基本知识,面临的挑战,以及部分最新的成果. 人类认识了解世界的信息中91%来自视觉,同样计算机视觉成为机器认知世界的基础,也是人工智能研 ...

  10. go proxy athens 部署到k8s

    目录 go proxy athens 部署到k8s 一.athens简介 二.部署 1.创建 PersistentVolume 2.创建service 3.创建deployment 4.ci/cd中使 ...