Drag не покидая пределов области

[Astraport]

Есть такой пример.
Теперь представьте, что таскаемый квадрат (box1) раз в 10 больше и нужно также перемещать его, но чтобы его края все время были снаружи родительского контейнера (parentBox).
Что-то я всю голову сломал что в этих строках поменять, чтобы все сработало:

box1.x = parentBox.mouseX - shiftX < 0 ? 0 : parentBox.mouseX - shiftX + box1.width > parentBox.width ? parentBox.width - box1.width : parentBox.mouseX - shiftX;
box1.y = parentBox.mouseY - shiftY < 0 ? 0 : parentBox.mouseY - shiftY + box1.height > parentBox.height ? parentBox.height - box1.height : parentBox.mouseY - shiftY;

[DaFive]

Эмм, немножко не понятно. Таскать его по серой области? Чтобы на белую не залезало?

[ChuwY]

я бы несколько иначе сделал драг, но если не трогать все остальное, то.

private function onMoveInParentBox1(event:MouseEvent):void
		{
			var targetX : Number = parentBox.mouseX - shiftX;
			var targetY : Number = parentBox.mouseY - shiftY;
			var bounds : Rectangle = box1.getBounds(parentBox);
			var ownBounds : Rectangle = box1.getBounds(box1);
			var xDiff : Number = bounds.width - PARENT_SIZE;
			var yDiff : Number = bounds.height - PARENT_SIZE;
 
			bounds.x = targetX + ownBounds.x;
			bounds.y = targetY + ownBounds.y;
 
			if(bounds.x > 0)
			{
				targetX = -ownBounds.x;
			} 
			else if(bounds.x < -xDiff)
			{
				targetX = -xDiff - ownBounds.x;
			}
 
			if(bounds.y > 0)
			{
				targetY = -ownBounds.y;
			} 
			else if(bounds.y < -yDiff)
			{
				targetY = -yDiff - ownBounds.y;
			}
 
			box1.x = targetX;
			box1.y = targetY;
		}

[Astraport]

ChuwY, спасибо, только что-то не так как нужно работает - резко от стенок левой и верхней отстает, а вверх, влево вообще меньше нуля не сдвигается.

Я поясню что нужно. Есть картинка в приложении (Flex mobile), она занимает все доступное ей пространство. Но экран маленький и я сделал зум (scale = 2). Теперь часть крупной картинки не видно за краями. Нужно её перетаскивать, чтобы можно было рассмотреть невидимые детали. Все нормально, но некрасиво когда картинка сдвигается и видно фон. Вот и хочу чтобы она сдвигалась не более краев видимой области.

[ChuwY]

Странно.
У меня все ок.
Вот пример того, как я, скорее всего, сделал бы:

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	[SWF(width="800", height="800")]
	public class dragTest extends Sprite
	{
		private static const PARENT_SIZE : Number = 50;
		private static const BOX_SIZE : Number = 300;
		//
		private var shiftX : Number;
		private var shiftY : Number;
		private var parentBox : Sprite;
		private var box1 : Sprite;
		private var prevPoint : Point;
		public function dragTest()
		{
			initBoxes();
			initListeners();
		}
 
		//*** private ***//
		private function initBoxes():void
		{
			parentBox = new Sprite();
			parentBox.graphics.beginFill(0x0, 0.5);
			parentBox.graphics.drawRect(0, 0, PARENT_SIZE, PARENT_SIZE);
 
			box1 = new Sprite();
			box1.graphics.beginFill(0x0, 0.5);
			box1.graphics.drawRect(50, 50, BOX_SIZE, BOX_SIZE);
 
			addChild(parentBox);
			addChild(box1);
 
			parentBox.x = (stage.stageWidth - parentBox.width)/2;
			parentBox.y = (stage.stageHeight - parentBox.height)/2;
 
			box1.x = (stage.stageWidth - box1.width)/2;
			box1.y = (stage.stageHeight - box1.height)/2;
		}
 
		private function initListeners():void
		{
			box1.addEventListener(MouseEvent.MOUSE_DOWN, onBox1MouseDown);
		}
 
		//*** handlers ***//	
		private function onBox1MouseDown(event:MouseEvent):void
		{
			prevPoint = new Point(stage.mouseX, stage.mouseY);
			stage.addEventListener(MouseEvent.MOUSE_UP,onMouseClick);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,onMoveInParentBox1);
		}
 
		private function onMoveInParentBox1(event:MouseEvent):void
		{
			var currentPoint : Point = new Point(stage.mouseX, stage.mouseY);
			var diffPoint : Point = currentPoint.subtract(prevPoint);
			var bounds : Rectangle = box1.getBounds(parentBox);
			var ownBounds : Rectangle = box1.getBounds(box1);
			var xSizeDiff : Number = bounds.width - parentBox.width;
			var ySizeDiff : Number = bounds.height - parentBox.height;
 
			bounds.offsetPoint(diffPoint);
 
			if(bounds.x > 0)
			{
				bounds.x = 0;
			} 
			else if(bounds.x < -xSizeDiff)
			{
				bounds.x = -xSizeDiff;
			}
			if(bounds.y > 0)
			{
				bounds.y = 0;
			} 
			else if(bounds.y < -ySizeDiff)
			{
				bounds.y = -ySizeDiff;
			}
 
			box1.x = parentBox.x + bounds.x - ownBounds.x;
			box1.y = parentBox.y + bounds.y - ownBounds.y;
 
			prevPoint = currentPoint;
		}
 
		private function onMouseClick(event:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseClick);
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMoveInParentBox1);
		}
	}
}

[Astraport]

Да, проверил, все отлично. Видимо это Flex чудит. Буду искать причину. О результатах сообщу дополнительно.

[ChuwY]

А вот самый абстрактный вариант, что у меня получился
Для тех несуществующих случаев, когда изображение в обоих контейнерах может быть не на нулевых коррдинатах.

private function onMoveInParentBox1(event:MouseEvent):void
		{
			var currentPoint : Point = new Point(stage.mouseX, stage.mouseY);
			var diff : Point = currentPoint.subtract(_prevPoint);
			var boxBound : Rectangle = box1.getBounds(stage);
			var parentBound : Rectangle = parentBox.getBounds(stage);
			var out : Point = new Point();
 
			boxBound.offsetPoint(diff);
 
			if(boxBound.containsRect(parentBound) == false)
			{
				var unionBound : Rectangle = parentBound.union(boxBound);
				var xMul : Number = unionBound.x < boxBound.x ? 1 : -1;
				var yMul : Number = unionBound.y < boxBound.y ? 1 : -1;
 
				out.x = (unionBound.width - boxBound.width) * xMul;
				out.y = (unionBound.height - boxBound.height) * yMul;
			}
 
			box1.x += diff.x - out.x;
			box1.y += diff.y - out.y;
 
			_prevPoint = currentPoint;
		}

[Wadimir]

итересно посмотреть как это будет выглядить с кругом или треугольником )))