坑爹的startDrag、stopDrag

本文探讨了AS3中startDrag与stopDrag方法使用的陷阱,特别是当多个对象同时使用这些方法时可能出现的问题。通过具体代码示例展示了如何避免因一个对象停止拖动而导致其他对象也无法拖动的情况。

startDrag、stopDrag有个很蛋碎的地方,浪费了我一早上。蛋疼的地方如一下代码:

package

{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class testDrag extends Sprite
{
private var bg:Sprite=new Sprite();
private var bg1:Sprite=new Sprite();
public function testDrag()
{
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
bg.graphics.beginFill(0xcccccc,0.5);
bg.graphics.drawRoundRect(10,10,50,50,8,8);
bg.graphics.endFill();
addChild(bg);
bg.addEventListener(MouseEvent.MOUSE_DOWN,dowmHander);
bg.addEventListener(MouseEvent.MOUSE_UP,upHander);

bg1.graphics.beginFill(0xff0000,0.5);
bg1.graphics.drawRoundRect(100,100,50,50,8,8);
bg1.graphics.endFill();
addChild(bg1);
stage.addEventListener(MouseEvent.MOUSE_DOWN,stagupHander)
}

protected function stagupHander(event:MouseEvent):void
{
bg1.stopDrag();
}

protected function upHander(event:MouseEvent):void
{
bg.stopDrag();
}

protected function dowmHander(event:MouseEvent):void
{
bg.startDrag(false,new Rectangle(10,10,100,50));
}

}

}


这样的bg是拖动不了的,因为有一个bg1停止拖动了,所以导致全部都停止了。骂人


<template> <div class="container"> <div class="button" ref="buttonRef" :style="buttonStyle" @mousedown="startDrag" @touchstart="startDrag" > Button </div> </div> </template> <script> export default { data() { return { buttonIndex: 0, isDragging: false, initialPosition: { x: 0, y: 0 }, currentPosition: { x: 0, y: 0 } }; }, computed: { buttonStyle() { return { transform: `translate(${this.currentPosition.x}px, ${this.currentPosition.y}px)` }; } }, methods: { moveButton() { this.buttonIndex = Math.floor(Math.random() * 24); }, startDrag(event) { event.preventDefault(); // 计算初始位置 const boundingRect = this.$refs.buttonRef.getBoundingClientRect(); this.initialPosition = { x: event.clientX || event.touches[0].clientX, y: event.clientY || event.touches[0].clientY }; // 更新当前位置 this.currentPosition = { x: boundingRect.left, y: boundingRect.top }; // 监听移动和释放事件 window.addEventListener('mousemove', this.handleDrag); window.addEventListener('touchmove', this.handleDrag, { passive: false }); window.addEventListener('mouseup', this.stopDrag); window.addEventListener('touchend', this.stopDrag); }, handleDrag(event) { event.preventDefault(); // 计算移动距离 const clientX = event.clientX || event.touches[0].clientX; const clientY = event.clientY || event.touches[0].clientY; const deltaX = clientX - this.initialPosition.x; const deltaY = clientY - this.initialPosition.y; // 更新当前位置 this.currentPosition = { x: this.currentPosition.x + deltaX, y: this.currentPosition.y + deltaY }; }, stopDrag() { // 停止拖动,移除事件监听器 window.removeEventListener('mousemove', this.handleDrag); window.removeEventListener('touchmove', this.handleDrag); window.removeEventListener('mouseup', this.stopDrag); window.removeEventListener('touchend', this.stopDrag); } } }; </script> <style> .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .button { width: 80px; height: 40px; background-color: #ccc; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; } </style> 执行时出现了以下错误[Vue warn]: Error in v-on handler: "TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function" (found at pages/Dragging/Dragging.vue:1) 22:21:10.359 TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function怎么改正
07-12
<template> <div ref="draggableDiv" class="draggable-element" :style="{ left: position.left + 'px', top: position.top + 'px' }" @mousedown="startDrag" > <button @click="click"> 我能点击 </button> 可拖拽元素 </div> </template> <script> export default { data() { return { position: { left: 1830, top: 520 }, startPos: { x: 0, y: 0 }, isDragging: false, windowSize: { width: 0, height: 0 }, elementSize: { width: 100, height: 50 } // 假设元素尺寸 }; }, mounted() { // 获取初始窗口尺寸 this.updateWindowSize(); // 监听窗口大小变化 window.addEventListener('resize', this.handleResize); // 文档级鼠标事件监听 document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDrag); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDrag); }, methods: { click(){ console.log('拖拽时不能点击哦') }, updateWindowSize() { this.windowSize = { width: window.innerWidth, height: window.innerHeight }; this.adjustPosition(); }, startDrag(event) { this.isDragging = true; this.startPos = { x: event.clientX - this.position.left, y: event.clientY - this.position.top }; }, drag(event) { if (!this.isDragging) return; // 计算新位置 let newLeft = event.clientX - this.startPos.x; let newTop = event.clientY - this.startPos.y; // 边界约束 newLeft = Math.max(0, Math.min(newLeft, this.windowSize.width - this.elementSize.width)); newTop = Math.max(0, Math.min(newTop, this.windowSize.height - this.elementSize.height)); this.position = { left: newLeft, top: newTop }; }, stopDrag() { if (!this.isDragging) return; this.isDragging = false; this.snapToRight(); }, snapToRight() { // 吸附到右侧边界 this.position.left = this.windowSize.width - this.elementSize.width; this.adjustPosition(); }, adjustPosition() { // 确保元素在视口范围内 this.position.left = Math.min( this.position.left, this.windowSize.width - this.elementSize.width ); this.position.top = Math.min( this.position.top, this.windowSize.height - this.elementSize.height ); }, handleResize() { this.updateWindowSize(); // 窗口变化后自动吸附到右侧 this.snapToRight(); } } }; </script> <style scoped> .draggable-element { position: fixed; width: 100px; height: 50px; background-color: #42b983; border: 2px solid #35495e; border-radius: 8px; cursor: move; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; user-select: none; } </style> 拖拽过程中不可点击按钮,完善代码
最新发布
09-24
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值