开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >获取元素旋转后的默认左上位置

问获取元素旋转后的默认左上位置
EN

Stack Overflow用户

提问于 2016-07-18 07:25:48

回答 1查看 347关注 0票数 0

我在我的项目中使用了jQuery draggable事件，当我拖动时，如果元素没有旋转，我会得到元素的正确左上位置。

jQuery(element).position().top
jQuery(element).position().left

使用下面的代码，

  jQuery(element).draggable({
                drag: function(){
                    positionUpdate();
                },
                stop: function(){
                    positionUpdate();
                }
            });

function positionUpdate(){
    var left = jQuery(element).position().left;
    var top = jQuery(element).position().top;
    console.log('left - '+ left);
    console.log('top - '+ top);
}

所以像这样的东西被打印出来，

left - 20
top - 50

但是如果元素在保持相同位置的情况下旋转，则会打印出类似下面的内容，

left - 25.3456
top  - 40.54545

请帮我解决这个问题，我希望在拖动旋转后的元素时打印没有旋转度数的原始值(20,50)。

感谢并致以问候

尼哈

EN

回答 1

Stack Overflow用户

发布于 2016-07-18 07:29:46

试试http://jqueryrotate.com/

代码示例

$("#img").rotate({bind:{
  click: function(){
    $(this).rotate({
      angle: 0,
      center: ["50%", "100%"],
      animateTo:180
      })
    }
  }
});

这样你可以固定你的中心，并且它不允许它在你的拖动调用之后改变。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38430831

复制

相关文章

用Javascript获取页面元素的位置

制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的大小和浏览器窗口的大小首先，要明确两个基本概念。一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器

ruanyf

2018/04/12

3.4K0

android获取uuid_android默认允许获取位置

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/169214.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/22

1.5K0

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。

德顺

2019/11/13

3.2K0

详解各种获取元素宽高及位置的属性

offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offset

laixiangran

2018/04/24

4.1K0

详解各种获取元素宽高及位置的属性

JavaScript 获取鼠标及元素在页面上的位置

HTML5学堂：JavaScript获取鼠标的位置，大家会想到clientX/Y等属性，灵活的获取鼠标的位置信息，能够便于我们实现各种复杂的页面交互效果，到底还有哪些属性可以获取鼠标的位置信息？另外，还有哪些能快速获取标签在页面中的位置信息？在书写一些“拖拽”页面交互效果，比如常见的拖拽效果、自定滚动条、放大镜等效果，都需要用到了鼠标或元素在页面上的位置信息。为了能够快速、灵活的获取鼠标位置信息，今天要带着大家来接触的不是利用clientX/Y获取鼠标的位置信息，而是利用了大家可能比较少用的两个属性lay

HTML5学堂

2018/03/13

3.6K0

JavaScript 获取鼠标及元素在页面上的位置

getBoundingClientRect方法获取元素在页面中的相对位置

获取元素位置可以用 offset 或 getBoundingClientRect，使用 offset 因为兼容性不好，比较麻烦，offset获取位置会形成“回溯”。而 getBoundingClientRect 方法则兼容性较好，基本所有的浏览器都支持了，且使用起来更容易和简单。

用户6167509

2019/09/04

4.1K0

CSS元素位置的互换

flex header reverse row table

方法一使用Order属性设置弹性盒对象元素的顺序。示例：将3个元素按倒序显示 flex-direction: 值描述 row（默认值）主轴为水平方向，起点在左端。 row-reverse 主轴为水平方向，起点在右端。 column 主轴为垂直方向，起点在上沿。 column-reverse 主轴为垂直方向，起点在下沿。 .container { display: flex; flex-direction: column; } .container .fi

十玖八柒

2022/08/01

2.5K0

jquery操作元素的位置

jquery html nat

.offset() 　　在匹配的元素中，获取第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。　　.offset() 这个不接受任何参数。　　　　var offset = p.offset(); //获取到这个元素的位置　　　　　　p.html( "left: " + offset.left + ", top: " + offset.top ); .offset.left 元素距左面的距离 .offset

用户1197315

2018/01/19

3.5K0

jquery1.9+获取append后的动态元素建议收藏

jquery java https http 网络安全

那么如果我们以前用live来获取jquery动态添加的元素，现在应该用on怎么写呢？

全栈程序员站长

2022/07/15

9120

js获取DOM元素相对于浏览器窗口的位置

Internet Explorer自从您可能关心就一直支持此功能，并且最终在CSSOM视图中对其进行了标准化。很久以前，所有其他浏览器都采用了它。

IT工作者

2022/01/17

5.7K0

查找数组元素位置

一个js练习题题目描述找出元素 item 在给定数组 arr 中的位置输出描述: 如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1 输入例子: indexOf([ 1, 2, 3, 4 ], 3) 输出例子: 2 代码如下： function indexOf(arr, item) { var len = arr.length,flag=0; for( var i =0; i<len;i++) { if(arr[i]==ite

用户1749219

2018/05/16

2.3K0

商品添加到购物车动画getBoundingClientRect获取元素位置

3. IE67的left、top会少2px,并且没有width、height属性。

javascript.shop

2019/09/04

1.7K0

商品添加到购物车动画getBoundingClientRect获取元素位置

【react-dnd使用总结一】拖放完成后获取放置元素在drop容器中的相对位置

工具函数-根据元素的起始位置和最终位置，计算相对于某元素的位置 export interface IPosition { left: number; top: number; } /** * 根据元素的其实位置和最终位置，计算相对于某元素的位置 * @param initialPosition 拖动元素相对于屏幕左上角的起始位置（偏移量） * @param finalPosition 拖放完成后当前节点相对于屏幕左上角的位置 * @param containerEle 目标容器元素 * @

fastmock

2022/07/13

4.5K0

html 动画集合

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

星辰_大海

2020/09/30

2.3K0

多个扇形元素绕圆旋转

background class height text width

这种效果有很多方案，最后选择了一个比较简单的方案，就是一个position: relative;的 div 。包裹5个position: absolute;的div。通过旋转，调整5个div的 top 与 left，而产生弧度，并使中心点都指向圆心。黄色扇形与文字都是在5个div内部。

拿我格子衫来

2023/10/19

3060

jquery获取第几个子元素_js获取元素的指定子元素

通过children方法，children(“input:first-child”)

全栈程序员站长

2022/08/03

27.5K0

小程序拒绝获取位置信息后，引导用户再授权

小程序微信

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/89647291

hotqin888

2019/05/13

3.4K0

小程序拒绝获取位置信息后，引导用户再授权

spring boot 默认静态文件位置及动态文件位置

spring spring boot jsp java

spring boot项目只有src目录，没有webapp目录，会将静态访问(html/图片等)映射到其自动配置的静态目录，如下

凯哥Java

2019/06/28

2.4K0

博采众长式的旋转位置编码

sum text 编码

上一篇文章中，我们对原始的Sinusoidal位置编码做了较为详细的推导和理解，总的感觉是Sinusoidal位置编码是一种"想要成为相对位置编码的绝对位置编码"。

mathor

2021/05/20

1.7K0

JS魔法堂：关于元素位置和鼠标位置的属性

一、关于鼠标位置的属性　　　　　　　　　　　　　　　　　　　　　　　　 1. 触发鼠标事件的区域盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件。 2. 鼠标事件对象MouseEvent下的属性 [a]. evt.pageX/Y ：以页面左上角为参考点，表示当前触发点离页面左上角的水平和垂直距离。注意：1. IE5.5~8不支持该属性，polyfill方法pageX = clientX + s

^_^肥仔John

2018/01/18

6K0

JS魔法堂：关于元素位置和鼠标位置的属性

相似问题

旋转元素的绝对左上角位置

12

变换旋转的左上角位置

10

如何获取css旋转变换后的元素位置

22

如何在调整旋转对象的大小后更新左上角位置？

12

jQuery获取旋转后的图像位置

13

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例