box.offsetTop
时间: 2023-12-23 12:12:43 浏览: 23
The offsetTop property returns the distance of the top edge of an element relative to the top edge of the nearest positioned ancestor element or the document if there is no positioned ancestor. It is measured in pixels.
相关问题
touchmove(e) { console.log(this.$refs.dragToBox.$el,this.dom,'==',this.$refs.dragToBox.$el.offsetTop) if (this.canDrag && this.dom) { let picDom = this.$refs.dragPic.$el let picTop = picDom.offsetTop let picHeight = picDom.offsetHeight let picLeft = picDom.offsetLeft let picWidth = picDom.offsetWidth console.log('picDom:'+picDom,'picTop:'+picTop,'picHeight:'+picHeight,'picLeft:'+picLeft,'picWidth:'+picWidth) let boxDom = this.$refs.dragToBox.$el let boxHeight = boxDom.offsetHeight let boxWidth = boxDom.offsetWidth let boxTop = boxDom.offsetTop let boxLeft = boxDom.offsetLeft console.log('boxDom:'+boxDom,'boxHeight:'+boxHeight,'boxWidth:'+boxWidth,'boxTop:'+boxTop,'boxLeft:'+boxLeft) let to = this.dom let toH = to.offsetHeight let toW = to.offsetWidth let toPageH = e.touches[0].pageY - toH / 2 - boxTop let toPageW = e.touches[0].pageX - toW / 2 - boxLeft console.log('to:'+to,'toH:'+toH,'toW:'+toW,'toPageH:'+toPageH,'toPageW:'+toPageW) if(!this.el.enterPic && (picHeight + picTop - 38) > toPageH) { this.el.enterPic = true } if (!this.item.child[this.index + 1]) { this.item.child[this.index + 1] = { isMove: false, enterPic: false, left: 0, top: 0 } this.sqArr = Object.assign([], this.sqArr) } this.el.isMove = true if (toPageH >= 0 && ((this.el.enterPic && toPageH <= picHeight) || (!this.el.enterPic)) && toPageH <= window.innerHeight - toH) { this.el.top = `${((toPageH * 100) / boxHeight)}%` // this.el.top = toPageH + 'px' } if (toPageW >= picLeft && toPageW <= (picLeft + picWidth-toH) && toPageW <= window.innerWidth - toW) { // this.el.left = toPageW + 'px' this.el.left = `${(toPageW * 100) / boxWidth}%` } } },
这段代码是一个 `touchmove` 事件的处理函数。在移动触摸过程中,根据触摸点的位置和元素的尺寸,计算并更新元素的位置。
首先,获取了一些元素的引用和尺寸信息,比如 `picDom` 表示一个名为 `dragPic` 的元素,`boxDom` 表示一个名为 `dragToBox` 的元素。
然后,根据触摸点的位置和元素的尺寸,计算了一些值,如 `toPageH` 表示触摸点相对于某个元素的垂直位置,`toPageW` 表示触摸点相对于某个元素的水平位置。
根据这些计算出来的值,更新了元素的位置信息,如 `this.el.top` 和 `this.el.left` 分别表示元素的垂直和水平位置。
最后,根据一些条件判断,更新了一些状态变量,如 `this.el.isMove` 表示元素是否正在移动,`this.el.enterPic` 表示元素是否进入了特定条件下。
整个代码逻辑是基于触摸点位置和元素尺寸的计算和判断,实现了元素的拖拽效果。
var box1 = document.getElementById("box1");
好的,看起来你是在使用 JavaScript 代码获取到了一个名为 "box1" 的元素。如果你想要实现拖动功能,可以尝试使用一些 JavaScript 库或者自己编写代码来实现。
下面是一个简单的示例代码,使用了原生的 JavaScript 来实现拖动功能:
```javascript
var box1 = document.getElementById("box1");
var isDragging = false;
var offsetX = 0;
var offsetY = 0;
box1.addEventListener("mousedown", function(event) {
isDragging = true;
offsetX = event.clientX - box1.offsetLeft;
offsetY = event.clientY - box1.offsetTop;
});
document.addEventListener("mousemove", function(event) {
if (isDragging) {
box1.style.left = event.clientX - offsetX + "px";
box1.style.top = event.clientY - offsetY + "px";
}
});
document.addEventListener("mouseup", function() {
isDragging = false;
});
```
在以上代码中,我们通过监听鼠标的 mousedown、mousemove 和 mouseup 事件来实现拖动功能。当鼠标按下时,记录下当前鼠标位置与元素位置的偏移量。在鼠标移动时,根据偏移量更新元素的位置,从而实现拖动效果。当鼠标松开时,停止拖动。
请确保在 HTML 中有一个 id 为 "box1" 的元素,并将以上代码放置在合适的位置,以便实现拖动效果。