(function ($) {
var move = false; //标记控件是否处于被拖动状态
var dragOffsetX = 0; //控件左边界和鼠标X轴的差
var dragOffsetY = 0; //控件上边界和鼠标Y轴的差
var dragObj = null; //用于存储当前对象

$.fn.mydrag = function () {
dragObj = this;

this.mousedown(function (e) {
move = true;

//获取鼠标和该控件的位置偏移量,并存入全局变量供后续调用
dragOffsetX = e.clientX - e.currentTarget.offsetLeft;
dragOffsetY = e.clientY - e.currentTarget.offsetTop;
});

$(document).mousemove(function (e) {
if (move) {
//不断获取鼠标新的坐标,并计算出控件的新坐标
var newX = e.clientX - dragOffsetX;
var newY = e.clientY - dragOffsetY;

//边界控制,document.documentElement.clientWidth:可见区域宽度 document.documentElement.clientHeight:可见区域高度
newX = newX < 0 ? 0 : newX;
newY = newY < 0 ? 0 : newY;
newX = newX > (document.documentElement.clientWidth - dragObj.outerWidth()) ? (document.documentElement.clientWidth - dragObj.outerWidth()) : newX;
newY = newY > (document.documentElement.clientHeight - dragObj.outerHeight()) ? (document.documentElement.clientHeight - dragObj.outerHeight()) : newY;

//把新的坐标重新赋值给控件
dragObj.css({ left: newX + "px", top: newY + "px", position: 'absolute' });
}
});

$(document).mouseup(function () {
if (move) {
move = false;
}
});
};
})(jQuery);

jq拖拽插件的更多相关文章

  1. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  2. 网站开发常用jQuery插件总结(三)拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  3. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

  4. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  5. vue拖拽插件(弹框拖拽)

    // =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...

  6. 自己写一个jqery的拖拽插件

    说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...

  7. 好用的JS拖拽插件

    下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下... 第一种拖拽方式-点击容器指定区域进行拖拽 $('.ui-dialog').on(DragEvent.ty ...

  8. 27、 jq 拖拽

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 拖拽插件SortableJS

    在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个开源的SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次 ...

随机推荐

  1. win10远程桌面身份验证错误,要求的函数不受支持

    出现原因win10最近安装了一个更新补丁导致的,当然可以直接卸载这个补丁,也可以安装操作来就可以.需要修改注册表里边的项目,添加下面的设置. 解决办法1.win+R 输入 regedit, 打开注册表 ...

  2. myeclipse 编写java代码提示 dead code 原因

    经常使用MyEclipse或Eclipse编辑器编写java代码的程序员,可能经常遇到一个黄线警告提示:dead code:一般程序员遇到这些问题都会置之不理,反正也不影响程序的编译执行.对,这不是b ...

  3. Codeforces 558E A Simple Task(计数排序+线段树优化)

    http://codeforces.com/problemset/problem/558/E Examples input 1 abacdabcda output 1 cbcaaaabdd input ...

  4. 二十二、NFS服务深入讲解

    一.查看nfs服务: [root@nfsserve ~]# ps -ef|grep -E "rpc|nfs"rpc       1565     1  0 17:29 ?      ...

  5. Codeforces Round #599 (Div. 2)D 边很多的只有0和1的MST

    题:https://codeforces.com/contest/1243/problem/D 分析:找全部可以用边权为0的点连起来的全部块 然后这些块之间相连肯定得通过边权为1的边进行连接 所以答案 ...

  6. PAT甲级——1006 Sign In and Sign Out

    PATA1006 Sign In and Sign Out At the beginning of every day, the first person who signs in the compu ...

  7. layui从url中取值 ajax获取当前链接中的变量

    在使用layui(javascript)的时候,  需要从当前页面的url地址中取值, 例如: http://localhost:8081/html/fund-purchase.html?fundID ...

  8. VB.Net 正则表达式测试器

    VB.Net制作的正则表达式工具,查询结果可以导出到Excel. 界面截图: 软件下载 Regexp.rar

  9. java后端导出excel

    最近工作中需要导出excel.这次机智一点做个笔记,顺便写了一个比较通用的工具类.自然目前不能生成java实体类属性嵌套多次的这种没办法导出了,后续有需要的时候我再改改. 首先,java后端导出exc ...

  10. Kintinuous解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. Kintinuous是Thomas Whelan在National University of Ireland Maynooth读博期间的工作,有 ...