ドラッグしてオブジェクトを移動
青で塗りつぶした四角をマウスでドラッグしてください
移動させることができます
XAMLのサンプルソース
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="OnCanvasLoaded"
Width="300" Height="300"
>
<Rectangle Width="300" Height="300" StrokeThickness="1" Stroke="Black" />
<Canvas Canvas.Top="129" Canvas.Left="124" Width="50" Height="40" >
<Rectangle Width="50" Height="40" StrokeThickness="1" Stroke="Black" Fill="Blue" MouseLeftButtonDown="OnMouseLeftButtonDown" MouseLeftButtonUp="OnMouseLeftButtonUp" MouseMove="OnMouseMove" Cursor="Hand" />
</Canvas>
</Canvas>
Javascriptのサンプルソース
function OnMouseLeftButtonDown(sender, mouseEventArgs)
{
sender.captureMouse();
beginX = mouseEventArgs.getPosition(null).x;
beginY = mouseEventArgs.getPosition(null).y;
isMouseDown = true;
}
function OnMouseMove(sender, mouseEventArgs)
{
if (isMouseDown == true) {
var currX = mouseEventArgs.getPosition(null).x;
var currY = mouseEventArgs.getPosition(null).y;
sender["Canvas.Left"] += currX - beginX;
sender["Canvas.Top"] += currY - beginY;
beginX = currX;
beginY = currY;
}
}
var isMouseDown;
function OnMouseLeftButtonUp(sender, mouseEventArgs)
{
isMouseDown = false;
sender.releaseMouseCapture();
}