`

js拖动事件处理方案

 
阅读更多
<script type="text/javascript"> 
	//注册一个Jquery的鼠标拖动函数,参数为要拖动的对象 
	$.fn.extend({ SliderObject: function (objMoved) { 
	var isMouseDown = false; //鼠标是否按下 
	var mouseDownPosiX; 
	var mouseDownPosiY; 
	var InitPositionX; 
	var InitPositionY; 
	var obj = $(objMoved) == undefined ? $(this) : $(objMoved); 
	obj.mousedown(function (e) { 
	//当鼠标按下时捕获鼠标位置以及对象的当前位置 
	mouseDownPosiX = e.pageX; 
	mouseDownPosiY = e.pageY; 
	isMouseDown = true; 
	
	InitPositionX = obj.css("left").replace("px", ""); 
	InitPositionY = obj.css("top").replace("px", ""); 
	
	}).mousemove(function (e) { 
	//当鼠标按下并且移动时,首先判断鼠标是否在当前焦点,以及鼠标是否已经弹起, 
	if ($(this).is(":focus") && isMouseDown) { 
	var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX); 
	var tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(InitPositionY); 
	obj.css("left", tempX + "px").css("top", tempY + "px"); 
	} 
	//当鼠标弹起或者离开元素时,将鼠标弹起置为false,不移动对象 
	}).mouseup(function () { 
	isMouseDown = false; 
	}).mouseleave(function () { 
	isMouseDown = false; 
	}); 
	} 
	}); 
	$(document).ready(function () { 
	$("#Slider").SliderObject($("#zb")); 
	}) 
	</script>

 

分享到:
评论

相关推荐

    Path.Drag.js:向传单路径添加拖动功能

    在JavaScript文件中包含Path.Drag.js (包括Leaflet本身之后)。 可通过NPM获得: npm install leaflet.path.drag 用法 dragging处理程序将附加到地图的路径实例。 要启用拖动,只需执行以下操作: layer....

    vue实现element-ui对话框可拖拽功能

    element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的,但是不...

    JAVA制造装备物联及生产管理(ERP)系统源码

    jQuery EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 Druid(数据源配置 sql防注入 sql性能监控) 统一的异常处理 JSP ...

    HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

    BS架构的企业级应用中,当一个表格...难以维护,甚至于一个简单的功能,都需要写很多的代码,比如事件处理等,这个方法就显得比较笨拙,灵活性很差,不是一个好的方案。 经过长时间的分析研究,各种场景的试验,我们找

    neighborhood-map:使用 GeoLocation、GeoCoding、Google Maps 和 Knockout.js 查找给定位置的聚会

    ###使用的资源:广场/优达学城论坛- 用于轻松处理 Date 对象###Current 问题/缺失功能: 谷歌地图在每个页面加载时都没有完全加载移动解决方案并不理想打开信息窗口在地图拖动事件中消失 - 难以跟踪事件地图不适应 ...

    基于SSM框架的生产管理ERP系统源码+数据库+项目文档,含计划进度、设备管理、工艺监控、物料监控、人员监控、质量监控、系统管理

    jQuery EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件 类型、大小、数量进行控制;利用search­box实现查找功能 Druid(数据源配置 sql防注入 sql性能监控) 统一的异常处理 JSP JSTL ...

    erp源码-ssm+easyUI+mysql+maven+shiro

    利用search-box实现查找功能 - [Druid(数据源配置 sql防注入 sql性能监控)](http://wosyingjun.iteye.com/blog/2306139) - 统一的异常处理 - JSP JSTL JavaScript - kindeditor富文本编辑器,处理图片上传和富文本...

    qh-erp-ssm

    - jQuery EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 - [Druid(数据源配置 sql防注入 sql性能监控)]...

    erp完整源码-ssm+easyUI+mysql+maven+shiro

    利用search-box实现查找功能 - [Druid(数据源配置 sql防注入 sql性能监控)](http://wosyingjun.iteye.com/blog/2306139) - 统一的异常处理 - JSP JSTL JavaScript - kindeditor富文本编辑器,处理图片上传和富文本...

    java ssm开发的生产管理ERP系统

    - jQuery EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 - [Druid(数据源配置 sql防注入 sql性能监控)] - 统一的异常处理 - JSP ...

    dhtmlxGridk 中文文档

    众多的事件处理程序,可以添加必要的交互性到您的基于网格 的接口。智能渲染和分页支持,让这个JavaScript的DataGrid有效地开展工作,甚至与庞大的数据集。 作为一个100%的客户端的JavaScript解决方案,dhtmlxGrid...

    Drag-to-gallery:HTML5、JavaScript - 将图像拖放到画廊

    所有数据处理都应在浏览器内实现,无需任何后端解决方案或附加技术。 任务应该在没有任何第三方库或框架的情况下实现。期望能够执行所有描述的操作的 JavaScript 应用程序。要求 浏览器支持:火狐、Chrome HTML5、...

    MF00331-JAVA制造装备物联生产管理(ERP)源码.zip

    jQuery EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并对文件类型、大小、数量进行控制;利用search-box实现查找功能 Druid(数据源配置 sql防注入 sql性能监控) 统一的异常处理 JSP JSTL ...

    KODExplorer 芒果云-资源管理器

    - 编辑器选中优化 选择鼠标到窗口外事件处理 ####fix bug:(bug解决和程序优化) - backspace后退截获浏览器事件,作为后退前一次访问的文件夹; - 搜索首字母不匹配问题 - 弹出层中的弹出层关闭,父窗口失去焦点...

    fmpWF:通过拖曳拖拽实现可视化的构建。主要是对页面的html与css的设置。构建完成提供下载构建好的HTM文件与css文件

    这些东西在处理文件处理方面(下载,修改)且根本性指导建议(我之前是做游戏,一直不知道怎么给游戏截图。看到了上面那句话,想出来了一个canvas的截图方案)}。上面的事情越发的让我明白计算机基础的本质。所以...

    MVC-Grocery-List

    是时候处理面向对象的 JavaScript 了。 在这个挑战中,您将构建一个简单的拖放式购物清单应用程序。 要成功完成此挑战,您应该熟悉以下概念和库功能: jQuery UI 和函数 目标 在这个挑战中专注于编写可靠的 OOJS。 ...

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

    WebIM_Ajax框架

    17.js插件:层拖拽 18.js插件:输入验证(中英文长度/正则/AJAX/自定义) 19.js插件:模拟 Title 实现功能: 1.同一用户只能在一处登录; 2.好友分组列表; 3.聊天; 4.离线消息; 5.上线/下线通知; 6.日志; 7....

    ghostcat源码(附带实例)

    -A星,深/广度,2D/3D/路点,寻路方式统一处理。 -二次贝尔法曲线,按长度切割和计算法线,光滑曲线拟合(过点或者不过点) -SWF解析器,从ByteArray中播放声音,直接控制AVM1的动画类容。 -丰富的文本缓动,部分文字...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    核心技术课程 HTML基础加强、css(包含Div+CSS布局)、JavaScript、Dom(事件、window对象、document对象、对话框、定时器、粘贴板、动态Dom、跨浏览器兼容性解决方案、JS压缩和CDN、Internet Explorer Developer ...

Global site tag (gtag.js) - Google Analytics