今天在做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对象添加了拖放事件处理,使得开发者能够轻松实现元素的拖动功能。 二、核心原理 1. **事件绑定**:`jquery.event.drag`通过绑定`mousedown`、`mousemove`、`mouseup`等鼠标事件来实现拖动行为。...
首先,我们要明确jQuery拖拽插件drag.js的核心功能:它允许用户通过鼠标或触摸事件来拖动DOM元素,实现元素在页面上的自由移动。这在创建可自定义布局、拖放排序列表或者构建交互式界面时非常有用。 拖拽插件的工作...
本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...
bootstrap-table拖拽需要dragtable.css,jquery.dragtable.js,jquery-ui.js,bootstrap-table-reorder-columns.js
在JavaScript和jQuery的世界里,实现元素的拖拽(Draggable)和吸附(Docking)功能是一项常见的需求,尤其是在创建交互式用户界面时。本篇将深入讲解如何利用这两种技术来增强网页的动态性和用户体验。 首先,...
在JavaScript的世界里,jQuery...在提供的`drag`文件中,可能包含了实现上述拖拽效果的示例代码或进一步的扩展,如添加缓动效果、限制拖动方向等。通过学习和实践这些代码,你可以更好地掌握jQuery实现拖拽功能的技巧。
在本文中,我们将深入探讨如何使用jQuery和drag.js插件实现水平、垂直及自由拖拽效果。drag.js是一个轻量级的JavaScript库,它为jQuery提供了强大的拖放功能,允许用户与网页元素进行交互,创建出动态且用户友好的...
该插件允许用户轻松地将任何HTML元素转化为可拖动的对象,只需在目标元素上应用特定的jQuery选择器并调用easyDrag方法。例如: ```javascript $(".draggable").easyDrag(); ``` 这段代码将使所有具有"class='...
总结来说,jQuery idrag插件是一个强大的工具,它使开发者能够快速实现元素的拖动和缩放功能,无需编写复杂的JavaScript代码。通过结合使用其丰富的配置选项和事件系统,你可以构建出高度交互的用户界面,提高用户...
1. **简单易用**:dragarrange插件的API简洁明了,只需几行代码即可实现拖拽排序功能。 2. **高度自定义**:支持设置各种回调函数,如开始拖动、结束拖动、拖动过程中的事件,方便开发者根据需要定制行为。 3. **...
- **多列排序**:TableDnD允许同时拖放多列,只需在`<th>`中添加`class="dnd"`,并设置`data-dnd="true"`。 - **拖放限制**:通过设置`onAllowDrop`回调函数,可以限制某些行不能被拖放到特定位置。 ### 6. 示例...
"jQuery手机触屏拖拽"技术就是为此而生,它允许用户通过手指在触屏上的滑动来拖动页面元素,比如实现图片轮播效果。 【描述】:在“jQuery手机触屏滑动图片轮播效果代码”中,我们主要关注的是移动端图片的拖拽切换...
Qt之QToolButton与QGroupBox实现动态拖拽Drag、Drop功能,可以随意拖放到QGroupBox内,也可以与现有的QToolButton交换位置,也可以拖拽出QGroupBox外释放
总结,jQuery的拖拽功能通过`.draggable()`和`.droppable()`方法实现了元素的拖动和放置,配合适当的参数和回调函数,可以创建出各种用户友好的交互体验。在实际项目中,可以结合具体的业务需求,对这些方法进行扩展...
本文将详细解析"jquery实现居中可拖拽窗体"这一主题,帮助你理解如何利用jQuery创建一个可以居中显示并允许用户拖动的窗口。 首先,让我们了解基本的HTML结构。在实现居中可拖拽窗体时,你需要一个包含标题和内容的...
在网页开发中,实现元素的放大、缩小、拖拽和移动功能是常见的需求,这能够增强用户的交互体验,尤其在创建交互式应用或富媒体网站时。本项目通过结合使用drag(拖拽)、jQuery和HTML技术,提供了一种实现此类功能的...
在本压缩包中,包含的`drag.js`是一个实现元素自由拖拽功能的jQuery插件。这个插件允许用户在网页上通过鼠标进行水平和垂直方向的拖动操作,增强网页的交互性。 首先,我们要理解`drag.js`的核心概念。在jQuery中,...
本篇文章将深入探讨如何使用jQuery和drag.js插件来创建水平、垂直以及自由拖拽的特效,这在网页设计中非常常见,如图片相册、窗口拖放等场景。 首先,jQuery提供了`mousedown`、`mousemove`和`mouseup`事件来实现...
本篇文章将深入探讨如何使用jQuery实现拖放(Drag and Drop)功能,特别是针对图片的拖放操作。拖放功能是网页交互中常见的一种增强用户体验的方式,常用于文件上传、页面元素排序等场景。 首先,我们需要引入jQuery...