jq拖拽插件
(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拖拽插件的更多相关文章
- jQuery网页元素拖拽插件
效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...
- 网站开发常用jQuery插件总结(三)拖拽插件gridster
1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...
- JQuery之拖拽插件
一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...
- 一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
- vue拖拽插件(弹框拖拽)
// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...
- 自己写一个jqery的拖拽插件
说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...
- 好用的JS拖拽插件
下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下... 第一种拖拽方式-点击容器指定区域进行拖拽 $('.ui-dialog').on(DragEvent.ty ...
- 27、 jq 拖拽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 拖拽插件SortableJS
在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个开源的SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次 ...
随机推荐
- 浅析laravel路由执行原理
包头SEO:目前很多文章已经对Laravel的执行原理做了详细介绍,这里只是为了个人做一下简单记录 首先看入口 index.php 关键的执行函数就是 handle方法 ,但是前面的几个预处理函数,包 ...
- MFC的combox禁止键盘输入
项目中有个combox的下拉窗控件,鼠标双击总能存在焦点,并且会修改combox显示的文字,网上查了好多资料,都说修改style,可是我的vs2015里没发现有style的属性,后面修改 modal ...
- 迅为iTop开发板使用buildroot构建opencv文件系统
这次我们来介绍使用buildroot构建opencv开发环境,buildroot 是 Linux平台上一个构建嵌入式Linux系统的框架.整个buildroot是由 Makefile脚本和Kconfi ...
- 104)PHP,目录树状输出
使用特定数量的缩进达到树状目的! 核心问题,计算需要缩进的数量! 缩进级别,与递归调用深度保持一致.每当执行一级递归操作,所找到的文件的缩进级别+; 语法实现: 增加一个参数,表示当前函数调用的深度级 ...
- 四剑客(sed)
一. sed sed简介: 用Linux环境中的编辑器程序来编辑文本文件.这些编辑器可以让你用简单命令或鼠标单击来轻松地处理文本文件中的文本.但有时候,你会发现需要自动处理文本文件,可你又不想动用全副 ...
- springboot学习笔记:6.内置tomcat启动和外部tomcat部署总结
springboot的web项目的启动主要分为: 一.使用内置tomcat启动 启动方式: 1.IDEA中main函数启动 2.mvn springboot-run 命令 3.java -jar XX ...
- mysql首次使用过程以及彻底卸载过程
安装过程: 步骤一: 安装mysql服务,使用命令行: yum install mysql-server 步骤二: 启动mysql服务: service mysqld start 确认msyql是否启 ...
- revit安装未完成,某些产品无法安装的解决方法
revit提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装revit失败提示revit安装未完成,某些产品无法安装,也有时候想重新安装revit的时候会出现本 ...
- Python之configparser配置文件的读取
配置文件名 config.ini 文件内容: [linux] ip:10.0.13.26 port:22 username:root password:W2ynE6b58wheeFho [mysql] ...
- Archives: 2013/6
OpenStack环境搭建 这一步有两个选择: 一种就是正统的真实搭建,所有都按生产环境来部署,费时费力. 还有一种就是官方推荐的一键安装DevStack,直接安装最新的版本,体验最新的特性. 至于如 ...