(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. 包-logging-hashlib-深浅拷贝

    一.包: 包的本质就是一个模块 什么是包:它是一系列模块文件的结合体,表示形式就是一个文件夹,该文件夹内部通常会有一个__init__..py的文件 导入包的过程:先产生一个执行文件的名称空间 1:创 ...

  2. mysql免安装版 win10

    1.在官网中下载免安装版:https://dev.mysql.com/downloads/mysql/ 2.解压下载后的文件,新建 data 文件夹和 my.ini 文件  3.打开 my.ini 文 ...

  3. 新年在家学java之基础篇--循环&数组

    因为“野味肺炎”的肆虐,过年被迫宅家只能吃了睡.睡了吃.这么下次只能长膘脑子空空,不如趁此机会重新学习java基础,为日后做铺垫~ 循环结构: 几种循环:for(::),while(){},do{}w ...

  4. SVN服务器的搭建(二)

    上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首先打开Vi ...

  5. 四、linux-mysql 下MySQL的管理(一)

    1.mysql启动的实质: 在单实例中,/etc/init.d/mysql start 是一个shell脚本,调用mysqld_safe脚本,最后调用mysqld服务启动mysql. 2. 关闭mys ...

  6. Linux_列出文件和文件属性

    ls +文件名:列出该文件 ls +目录名:列出该目录下的文件 ls 什么也不加:列出当前工作目录下的文件 ls -a  列出包括隐藏文件,即所有文件名 ls -l 列出文件名+详细信息 ls -al ...

  7. ExecuteScalar()方法的使用

    ExecuteScalar()方法的作用是: 执行查询,并返回查询所返回的结果集中第一行的第一列.所有其他的列和行将被忽略. 1.返回的是一个object类型,也就是说是所有数据类型的基类,可根据se ...

  8. LeetCode No.76,77,78

    No.76 MinWindow 最小覆盖子串 题目 给你一个字符串 S.一个字符串 T,请在字符串 S 里面找出:包含 T 所有字母的最小子串. 示例 输入: S = "ADOBECODEB ...

  9. 读写分离(AMOEBA)

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 1. 环境准备: 1.1新增一台虚拟机 amoeba:192.168.247.80 架构(使用图片源自其它博文): 1. ...

  10. OSI体系结构(七层)

    OSI体系结构,意为开放式系统互联.国际标准组织(国际标准化组织)制定了OSI模型.这个模型把网络通信的工作分为7层,分别是物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 1至4层被认为 ...