(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. windows远程无法粘贴复制

    解决办法: 1.  打开电脑的任务管理器,找到 rdpclip.exe 进程,如果能找到进程,就右键结束进程,如果没有,那就正好,不用结束了,说明没启动,正常来说,都会存在的,但是在我的win10就开 ...

  2. bzoj2882工艺(最小表示法)

    O(nlogn)的做法十分显然,有三种可以做到O(nlogn)的:1.最容易的想法:把串扩展成两倍,然后跑一遍SA求后缀数组.2.求后缀同样也可以用SAM去求解,用map存一下.3.最暴力的方法:直接 ...

  3. Linux从一台linux机器复制文件到另一台linux机器

    1.功能说明 scp 用于将文件/目录从一台linux系统复制到另一台linux系统.传输协议为SSH协议,保证了传输数据的安全性 其格式如下: (1)scp  本地linux系统文件路径   远程用 ...

  4. win10+CUDA9.0176、CUDNN7.6.0安装

    在github上下载了一个文本分类的代码,包含了CNN.LSTM等分类模型,运行时说我的CUDA版本不行,我原来是9.1,让我安装9.0 然后开始卸载9.1啊,在此感谢博主:https://blog. ...

  5. 40)PHP,mysql_fetch_row和mysql_fetch_array和mysql_fetch_assoc的区别

    分析: mysql_fetch_row,这个函数是从结果集中取一行作为枚举数据,从和指定的结果标识关联的结果集中取得一行数据并作为数组返回.每个结果的列储存在一个数组的单元中,偏移量从 开始. 注意, ...

  6. Java虚拟机内存划分

    Java虚拟机在执行Java程序时,会把它管理的内存划分为若干个不同的数据区.这些区域有不同的特性,起不同的作用.它们有各自的创建时间,销毁时间.有的区域随着进程的启动而创建,随着进程结束而销毁,有的 ...

  7. testNG报告优化,testNG-xslt

    一.在使用testNG自动化框架执行测试用例后,会自动生成HTML的测试报告,但是过于简单,信息展示极少,也没有图表说明,所有我们使用testNG-xslt进行美化. 二.具体实现步骤: 1.在网站下 ...

  8. 牛客-小w的a=b问题

    题目传送门 sol1:老实做,预处理出所有2到1e5的素数,对所有数进行分解质因数,然后对比因子个数.感觉有点卡常,用了快读然后多次优化之后才过的,map也用上了. 素数筛,快速分解质因数 #incl ...

  9. 一致性 hash 算法( consistent hashing )及java实现

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在cache 系统中应用越来越广泛: 1 基 ...

  10. [LC] 8. String to Integer (atoi)

    Implement atoi which converts a string to an integer. The function first discards as many whitespace ...