JS 实现控件拖拽/拖动

下面是实现控件拖拽的完整代码。

(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);

使用方法：

1、建一个js文件，将上述代码贴进去。

2、将该js文件引入页面。

3、调用方法：$("#id").mydrag();

或者还可以用下面这个插件替换上面这个插件，用法完全一样，效果有一点点不一样，可以自己体会。

(function ($) {var dragOffsetX = 0;        //控件左边界和鼠标X轴的差var dragOffsetY = 0;        //控件上边界和鼠标Y轴的差$.fn.mydrag = function () {this.mousedown(function (e) {//获取鼠标和该控件的位置偏移量，并存入全局变量供后续调用dragOffsetX = e.clientX - e.currentTarget.offsetLeft;dragOffsetY = e.clientY - e.currentTarget.offsetTop;});this[0].ondragend = this[0].ondrag = function (e) {//不断获取鼠标新的坐标，并计算出控件的新坐标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 - this.width) ? (document.documentElement.clientWidth - this.width) : newX;newY = newY > (document.documentElement.clientHeight - this.height) ? (document.documentElement.clientHeight - this.height) : newY;//把新的坐标重新赋值给控件$(this).css({ left: newX + "px", top: newY + "px", position: 'absolute' });};};
})(jQuery);

JS 实现控件拖拽/拖动相关推荐

C#利用控件拖拽技术制作拼图游戏
C#利用控件拖拽技术制作拼图游戏这篇文章主要介绍了C#利用控件拖拽技术制作拼图游戏的方法以及核心代码,需要的朋友可以参考下主要实现的功能: 1.程序附带多张拼图随机拼图. 2.可手动添加拼图. 3 ...
C++语言Qt实现控件拖拽和连线类似可视化操作Simulink仿真类软件电路仿真软件和模型驱动等软件
目标:开发一个电路仿真软件. 内部原理:qt编写电路元件连接的可视化界面,输出电路节点连接关系为一张表.matlab编写电路仿真算法,读取节点连接表,进行运算,得出仿真结果,qt读取仿真结果并且在界面 ...
转大佬--C++语言Qt实现控件拖拽和连线类似可视化操作Simulink仿真类软件电路仿真软件和模型驱动等软件
转自–标biao的文章:https://blog.csdn.net/kangkanglhb88008/article/details/120812524 目标:开发一个电路仿真软件. 内部原理:qt编 ...
组态软件--控件拖拽
目录组态软件--控件拖拽实现功能相关说明两种思路第一种思路第二种方法参考的博客组态软件–控件拖拽个人最近也是在用Qt做组态软件,一开始用QGraphics来做组态软件的UI设计程序, ...
element ui 图片控件排序_vuedraggable+element ui实现页面控件拖拽排序效果
项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的 ...
15. QML控件拖拽并实现自动吸附功能
效果展示: 效果1:自动吸附,但被拖拽控件无法重复使用拖拽吸附不可重复实现步骤: 1. 第一步: 简单布局,在左侧矩形区域中添加一个小的矩形框,是需要被拖拽的控件,重点是要对这个将要拖拽的小矩形控 ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
Visual Studio 2017 ASP.NET在设计WEB页面时让控件可以自由拖动
我对DIV/CSS一窍不通,时间紧急,需要完成WEB页面设计,因此想到了偷懒的方法,如果使用Visual Studio 2017 ASP.NET在设计WEB页面时让控件可以自由拖动,那就太好啦! 一. ...

JS 实现控件拖拽/拖动

JS 实现控件拖拽/拖动相关推荐

最新文章

热门文章