`
shen211
  • 浏览: 47431 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 拖拽插件easydrag点击位置偏移问题

    博客分类:
  • ajax
阅读更多
$.updatePosition = function(e) {
		var pos = $.getMousePosition(e);

		var spanX = (pos.x - lastMouseX);
		var spanY = (pos.y - lastMouseY);
		if(lastElemTop + spanY != 0){
			$(currentElement).css("top",  (lastElemTop + spanY));
		}
		if(lastElemLeft + spanX != 0){
			$(currentElement).css("left", (lastElemLeft + spanX));
		}else{
			$(currentElement).css("left", -$(currentElement).width());
		}
	};


只点击时lastElemLeft + spanX == 0而此情况下,插件会偏移一个当前Div的宽度,因此添加处理$(currentElement).css("left", -$(currentElement).width());
分享到:
评论

相关推荐

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

    《jQuery.easyDrag.js:探索史上最强大的拖拽插件》 在Web开发中,交互性和用户体验是至关重要的元素,而拖放功能(Drag and Drop)无疑是提升用户体验的有效手段之一。jQuery库以其简洁的API和丰富的插件生态,为...

    Jquery插件EasyDrag拖动

    2. **坐标计算**:插件内部会计算鼠标点击时的位置与元素初始位置之间的偏移量,以便在鼠标移动时正确调整元素的位置。 3. **边界限制**:可以设置元素的拖动边界,确保元素不会超出特定区域,提高用户体验。 4. *...

    Jquery插件EasyDrag一行代码实现拖动效果

    EasyDrag插件的核心功能是将HTML元素转化为可拖动对象,用户可以通过鼠标点击并移动来改变元素的位置。这个插件的亮点在于其简洁的API,使得开发者可以快速集成拖放功能,提高开发效率。 首先,要使用EasyDrag插件...

    jquery.easydrag.js

    使用方法: $("#divPanel").easydrag();

    jquery.easydrag.handler.beta2.js

    首先我的弹窗div在弹出的时候是默认在页面正中的,但是要使用这个插件被拖动的div就要使 用”position:absolute”的属性定位,这让我们的居中非常困难。解决思路:在触发弹窗之前用js获取当前屏 幕的分辨率然后将...

    使用jQuery的easydrag插件实现可拖动的DIV弹出框

    标题中的“使用jQuery的easydrag插件实现可拖动的DIV弹出框”是指通过集成jQuery库和一个名为easydrag的插件,来创建一个可拖动的对话框(DIV元素)。这种技术常用于增强用户体验,让用户能够自由移动界面元素以适应...

    JQuery 实现鼠标拖动内容

    本篇文章将详细讲解如何利用jQuery实现鼠标拖动内容的功能,结合给定的文件"jquery-1.4.3.js"(jQuery的核心库)和"jquery.easydrag.js"(一个jQuery插件,用于实现拖拽效果),我们将深入理解这一功能的实现原理和...

    利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值

    标题中的“利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值”是指在一个Web应用中,使用JQuery库结合EasyDrag插件来创建一个可拖动的弹出Div,并且能够传递数据给这个Div,以及从Div...

    portlets jquery drag插件

    jquery drag插件, 拖放插件(Drag and Drop) UI/Draggables. EasyDrag jQuery Plugin. jQuery Portlets. jqDnR - drag, drop resize. Drag Demos.

    jQuery的插件列表(2010-1-25更新)

    1. **jQuery Scroll Follow**:这是一个能让元素随屏幕滚动的插件,常用于创建固定在屏幕某一位置,如侧边栏导航,始终保持可见的效果。 2. **jScrollPane**:提供自定义滚动条功能,使得滚动条外观和交互更加美观...

    基于jquery的一行代码轻松实现拖动效果

    在本例中,我们将会探讨如何通过引入一个jQuery插件EasyDrag,以简洁的方式在页面元素上实现拖动功能。 首先,jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过封装DOM操作、事件处理和动画效果等基础操作...

    jquery.jDialog

    3. **拖动功能**:集成`jquery.easydrag.js`,使得对话框可被用户自由拖动,提高交互性。 4. **多样的样式**:内置多种预设样式,同时也允许开发者通过CSS自定义对话框的外观。 5. **事件处理**:提供丰富的事件回...

    双击标签取得html内容并显示

    6. `jquery.easydrag.handler.beta2.js`:这是jQuery的一个拖放插件,可能用于实现用户可以通过拖动来选择元素的功能。 7. `float.js`:可能用于实现元素浮动或布局相关的效果。 实现“双击标签取得html内容并显示...

    关于图片的一些处理

    - 对于`easyDrag.js`,可以研究其源码理解如何实现图片的拖放功能,包括如何捕获和处理拖放事件,以及如何更新图片在页面上的位置。 7. **工具应用**: - 图像处理工具如Photoshop、GIMP等,以及在线工具,可以...

Global site tag (gtag.js) - Google Analytics