`
直线曲线
  • 浏览: 46836 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类
最新评论

js拖动drag实现,只需传入jquery对象以及可选偏移量

    博客分类:
  • js
阅读更多
今天在做gis过程中,需要实现对popup的拖动,所以做了以下实现。


	//绑定drap事件,d为jquery对象,_x_y为偏移量
	var bindDrag = function(d,_x,_y){
		var _canDarg = 0;
		var _oldxy = {x:0,y:0};
		alert(_x+" " +_y);
		if(_x != 0 && _x != undefined){
			_oldxy.x = _x;
		}
		if(_y != 0 && _y != undefined){
			_oldxy.y = _y;
		}
		d.mousedown(function(e){		
			_canDarg = 1;
			if(_oldxy.x == 0){
				_oldxy.x = e.clientX - d.offset().left;
			}
			if(_oldxy.y == 0 ){
				_oldxy.y = e.clientY - d.offset().top;
			}		
		});
		$(document).mousemove(function(e){
			if(_canDarg == 1){
				d.css("position","absolute");
				d.css("left",e.clientX-_oldxy.x);
	    	d.css("top",e.clientY-_oldxy.y);
			}
		});
		$(document).mouseup(function(e){
			if(_canDarg ==1){
				_canDarg = 0;
			}
		});
	};
分享到:
评论

相关推荐

    jquery.event.drag jquery拖动插件

    这个插件为jQuery对象添加了拖放事件处理,使得开发者能够轻松实现元素的拖动功能。 二、核心原理 1. **事件绑定**:`jquery.event.drag`通过绑定`mousedown`、`mousemove`、`mouseup`等鼠标事件来实现拖动行为。...

    jQuery拖拽插件drag.js

    首先,我们要明确jQuery拖拽插件drag.js的核心功能:它允许用户通过鼠标或触摸事件来拖动DOM元素,实现元素在页面上的自由移动。这在创建可自定义布局、拖放排序列表或者构建交互式界面时非常有用。 拖拽插件的工作...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...

    jquery.dragtable.js

    bootstrap-table拖拽需要dragtable.css,jquery.dragtable.js,jquery-ui.js,bootstrap-table-reorder-columns.js

    Javascript jquery 实现 拖拽, 和吸附功能

    在JavaScript和jQuery的世界里,实现元素的拖拽(Draggable)和吸附(Docking)功能是一项常见的需求,尤其是在创建交互式用户界面时。本篇将深入讲解如何利用这两种技术来增强网页的动态性和用户体验。 首先,...

    jquery简单实现拖拽效果

    在JavaScript的世界里,jQuery...在提供的`drag`文件中,可能包含了实现上述拖拽效果的示例代码或进一步的扩展,如添加缓动效果、限制拖动方向等。通过学习和实践这些代码,你可以更好地掌握jQuery实现拖拽功能的技巧。

    jQuery水平垂直自由拖拽代码drag.js插件

    在本文中,我们将深入探讨如何使用jQuery和drag.js插件实现水平、垂直及自由拖拽效果。drag.js是一个轻量级的JavaScript库,它为jQuery提供了强大的拖放功能,允许用户与网页元素进行交互,创建出动态且用户友好的...

    jquery.easyDrag.js史上最强大的拖拽插件

    该插件允许用户轻松地将任何HTML元素转化为可拖动的对象,只需在目标元素上应用特定的jQuery选择器并调用easyDrag方法。例如: ```javascript $(".draggable").easyDrag(); ``` 这段代码将使所有具有"class='...

    jQuery拖拽放大缩小插件idrag

    总结来说,jQuery idrag插件是一个强大的工具,它使开发者能够快速实现元素的拖动和缩放功能,无需编写复杂的JavaScript代码。通过结合使用其丰富的配置选项和事件系统,你可以构建出高度交互的用户界面,提高用户...

    jQuery拖拽排序插件dragarrange

    1. **简单易用**:dragarrange插件的API简洁明了,只需几行代码即可实现拖拽排序功能。 2. **高度自定义**:支持设置各种回调函数,如开始拖动、结束拖动、拖动过程中的事件,方便开发者根据需要定制行为。 3. **...

    JQuery-tableDnD 拖拽的基本使用 Table Drag and Drop JQuery plugin

    - **多列排序**:TableDnD允许同时拖放多列,只需在`<th>`中添加`class="dnd"`,并设置`data-dnd="true"`。 - **拖放限制**:通过设置`onAllowDrop`回调函数,可以限制某些行不能被拖放到特定位置。 ### 6. 示例...

    Qt之QToolButton 实现动态拖拽Drag、Drop功能

    Qt之QToolButton与QGroupBox实现动态拖拽Drag、Drop功能,可以随意拖放到QGroupBox内,也可以与现有的QToolButton交换位置,也可以拖拽出QGroupBox外释放

    jquery实现拖拽

    总结,jQuery的拖拽功能通过`.draggable()`和`.droppable()`方法实现了元素的拖动和放置,配合适当的参数和回调函数,可以创建出各种用户友好的交互体验。在实际项目中,可以结合具体的业务需求,对这些方法进行扩展...

    jquery实现居中可拖拽窗体

    本文将详细解析"jquery实现居中可拖拽窗体"这一主题,帮助你理解如何利用jQuery创建一个可以居中显示并允许用户拖动的窗口。 首先,让我们了解基本的HTML结构。在实现居中可拖拽窗体时,你需要一个包含标题和内容的...

    网页实现任意放大、缩小、拖拽、移动drag+jquery+html.rar

    在网页开发中,实现元素的放大、缩小、拖拽和移动功能是常见的需求,这能够增强用户的交互体验,尤其在创建交互式应用或富媒体网站时。本项目通过结合使用drag(拖拽)、jQuery和HTML技术,提供了一种实现此类功能的...

    jQuery水平垂直自由拖拽代码drag.js插件.zip

    在本压缩包中,包含的`drag.js`是一个实现元素自由拖拽功能的jQuery插件。这个插件允许用户在网页上通过鼠标进行水平和垂直方向的拖动操作,增强网页的交互性。 首先,我们要理解`drag.js`的核心概念。在jQuery中,...

    jquery拖动jquery拖动jquery拖动

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。"jquery拖动"这个话题是关于如何使用jQuery实现元素的拖放功能,这是一种常见的交互设计,常见于各种...

    jQuery可水平垂直自由拖拽代码.zip

    本篇文章将深入探讨如何使用jQuery和drag.js插件来创建水平、垂直以及自由拖拽的特效,这在网页设计中非常常见,如图片相册、窗口拖放等场景。 首先,jQuery提供了`mousedown`、`mousemove`和`mouseup`事件来实现...

    jquery 实现Drag and drop的例子

    本篇文章将深入探讨如何使用jQuery实现拖放(Drag and Drop)功能,特别是针对图片的拖放操作。拖放功能是网页交互中常见的一种增强用户体验的方式,常用于文件上传、页面元素排序等场景。 首先,我们需要引入jQuery...

Global site tag (gtag.js) - Google Analytics